计算每格的总高度

Question

My HTML code looks as follow

<ul>
<li id="slide-page<?php echo $i; ?>" class="dragend-page page<?php echo $i; ?>">
    <div class=“mt_row-fluid”></div>
    <div class=“mt_row-fluid”></div>
</li>
<li id="slide-page<?php echo $i; ?>" class="dragend-page page<?php echo $i; ?>">
    <div class=“mt_row-fluid”></div>
</li>
<li id="slide-page<?php echo $i; ?>" class="dragend-page page<?php echo $i; ?>">
    <div class=“mt_row-fluid”></div>
    <div class=“mt_row-fluid”></div>
    <div class=“mt_row-fluid”></div>
    <div class=“mt_row-fluid”></div>
</li>
</ul>

In some of the li elements, there are more divs with class 'mt_row-fluid' than in other li elements. What I'd like to do is calculate the total height of all divs per li element. When doing so, I can check whether they are larger than the screen, and trigger a button if needed to make clear the user can scroll down.

I've tried everything I could think off, but without any luck. Hopefully you could help me out.

   function totalHeight(){
var myVar = "#slide-page" + <?= json_encode($i) ?>;
var getHeight = 0;

$(this).find(myVar + ' .mt_row-fluid').each(function(){
    getHeight += $(this).height();
});    

console.log(getHeight);
};

totalHeight();

The code above is one of the solutions I've tried without any succes. Perhaps there is a completely different way to get to what I want, but please let me know if that's the case.

Answer 1

You can Try this :

  $(function(){
    var liElements = $("li");
    $.each(liElements, function (i) {
      var widthOfAllDivInLi =0;  
      var divsMtRowFluid=$(this).find("div");
        $.each(divsMtRowFluid, function (){
          widthOfAllDivInLi+= this.offsetWidth;      
        });
        console.log("width all div of Li number "+(i+1)+ ":" +widthOfAllDivInLi)  
    });
  })

And test it yourself : http://jsfiddle.net/m4jeL2uf/4/

If you have any question about this answer i'm here to help.

Best regards

Answer 2

you have juste to change the "find()" function parameter "div" by ".nameOFYourClass", in your case ".mt_row-fluid" :

$(function(){
var liElements = $("li");
$.each(liElements, function (i) {
  var widthOfAllDivInLi =0;  
  var divsMtRowFluid=$(this).find(".mt_row-fluid");
    $.each(divsMtRowFluid, function (){
      widthOfAllDivInLi+= this.offsetWidth;      
    });
    console.log("width all div of Li number "+(i+1)+ ":" +widthOfAllDivInLi)  
});
})

You can test it again : http://jsfiddle.net/m4jeL2uf/7/

I invite you to read more about Jquery Selectors, it will be very helpful to understand JQuery traversing ( to find HTML elements )

Best regards