Question

我有三个包含li的div。我希望用超过一定高度的li变成红色。在第一个ul中，我想计算第一个li的高度，看它是否超过100，如果没有将它加到第二个li的高度，比较，如果它超过100我用红色染色。然后在第二个ul内我做同样的操作，但因为它是另一个ul，结果必须是0.所以我试过这个：

var result = 0;

$('li').each(function(){

       result += $(this).height(); 
  alert(result);

    if(result > 100){
$(this).css("color", "red");
    }

 });

但是在更改ul时似乎没有重新初始化计数。所以它在第4天到最后都有颜色。但我想要的只是为第四个颜色着色，因为只有他才能让高度超过ul。我试图循环通过ul，但它做了一些奇怪的事情。

这是一个小提琴：https://jsfiddle.net/ybonmbgt/31/

感谢。

Answer 1

然后首先迭代所有ul并重置计数器，然后在li

下迭代this ul

$('ul').each(function() {
  var result = 0;
  $(this).find("li").each(function() {
    result += $(this).height();
    if (result > 100) {
      $(this).css("color", "red");
    }
  });
});

ul {
  max-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <ul>
    <li>Hello</li>
    <li>how are you ? </li>
  </ul>
</div>

<div class="list">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </li>
    <li> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
  </ul>

</div>


<div class="list">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li> Ut enim ad minim veniam </li>
    <li> Excepteur</li>
  </ul>

</div>

看看这个fiddle

Jquery循环通过li来计算高度

1 个答案: