计算每格的总高度

Question

我的HTML代码如下

<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>

在某些li元素中，“ mt_row-fluid”类的div比其他li元素中的更多。 我想做的是计算每个li元素的所有div的总高度。 这样做时，我可以检查它们是否大于屏幕，并在需要时触发按钮以使用户可以向下滚动。

我已经尽力想了一切，但是没有任何运气。 希望你能帮助我。

   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();

上面的代码是我尝试的没有成功的解决方案之一。 也许有一种完全不同的方式来达到我想要的目的，但是如果是这种情况，请告诉我。

Answer 1

您可以尝试：

  $(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)  
    });
  })

并自己测试： http : //jsfiddle.net/m4jeL2uf/4/

如果您对此答案有任何疑问，我们将为您提供帮助。

最好的祝福

Answer 2

您只需通过“ .nameOFYourClass”更改“ find（）”函数参数“ div”，在您的情况下为“ .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)  
});
})

您可以再次对其进行测试： http : //jsfiddle.net/m4jeL2uf/7/

我邀请您阅读有关Jquery选择器的更多信息，这对理解JQuery遍历（查找HTML元素）将非常有帮助。

最好的祝福