上一个学期的第一个孩子的父母分区的最小身高

Question

I have a div with basic markup as:-

<div class="jp-container" style="height: 400px;">
<div class="jspContainer" style="height: 400px;">
<div class="class="jspPane">
  <div class="cfg-item"></div>
  <div class="cfg-item"></div>
  <div class="cfg-item"></div>
  <div class="cfg-item"></div>
</div>
</div>
</div>

problem with the feed is that the height of the paren(s) is fixed to 400px (or another arbitrary figure). So my question is:-

How can I ensure that the parent container divs min-heights are set to the first div with class "cfg-item". Idea is to show the full output of the first Facebook feed item so none is cut off.

I have something like:-

<script>
jQuery(document).ready(function($) {
$('.jspContainer .cff-item').first(function(){
$('.jspContainer, .jp-container').css('min-height', $(this).outerHeight());
}); 
});
</script>

Answer 1

I maybe didn't understand well your question, but if you want to select the first div with the class .cfg-item try this path:

$(".jspPane").next(".cfg-item");

SO you call the "container" div of all the .cfg-item divs and you select the first one.

Hope it helped, as soon as I understand better or you explain a little better I try to give you something more precise.

EDIT1:

To be more specific you can do this:

 $("div.jspPane").next("div.cfg-item");

EDIT2:

HTML:

<div class="jp-container minHeight" style="height: 400px;"> <div class="jspContainer minHeight" style="height: 400px;">

jQuery:

// We declare variables
var containers = $(".minHeight");   //We put both containers in same variable with same class
var firstChild = $(".jspPane").next(".cfg-item").height();  //We get the first child height

containers.css('min-height', firstChild);  //We give the containers the height of the first child

I didn't check this, I am at work and don't have much time. I can check it later.

I hope it helped you, and at least gave you some ideas. Good luck! ;)