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元素中，有更多的div与类'mt_row-fluid'比在其他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

你有责任改变＆＃34; find（）＆＃34;功能参数＆＃34; div＆＃34; by＆＃34; .nameOFYourClass＆＃34;，在你的情况下＆＃34; .mt_row-fluid＆＃34; ：

$(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元素）非常有用

祝你好运

计算每个div的总高度

2 个答案: