提问人：in2d 提问时间：7/30/2021 最后编辑：Rory McCrossanin2d 更新时间：7/30/2021 访问量：153
为什么这个 JQuery 循环不会改变元素小于 4 的 CSS
How come this JQuery loop doesn't change CSS with elements less than 4
问：
为什么这个脚本不循环遍历每个 ul.products 元素并计数 li.product 元素，然后将其 css（background 更改为黄色）。
当我将<更改为>时，背景颜色会更改为所有元素。到目前为止，我知道问题出在这个脚本检查每个父元素ul.products，但能够计算li.product。
$(document).ready(function() {
$('ul.products').each(function() {
if ($('li.product').length < 4) {
$("li.product").css("background-color", "yellow");
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="products">
<li class="product">Test</li>
<li class="product">Test</li>
<li class="product">Test</li>
<li class="product">Test</li>
<li class="product">Test</li>
</ul>
<ul class="products">
<li class="product">Test</li>
<li class="product">Test</li>
<li class="product">Test</li>
</ul>答：
4赞
Rory McCrossan
7/30/2021
#1
问题在于您的代码查看 DOM 中的所有元素，而不是专门查看循环中每个元素中的元素。.productuleach()
要更正此问题，您可以使用引用当前 ，然后检索其子元素：$(this)ulli
jQuery($ => {
$('ul.products').each(function() {
let $li = $(this).children('.product');
if ($li.length < 4) {
$li.css("background-color", "yellow");
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="products">
<li class="product">Test</li>
<li class="product">Test</li>
<li class="product">Test</li>
<li class="product">Test</li>
<li class="product">Test</li>
</ul>
<ul class="products">
<li class="product">Test</li>
<li class="product">Test</li>
<li class="product">Test</li>
</ul>顺便说一句，请注意，jQuery 1.9.1 已经过时了，实际上已经超过 8 年了。在撰写此答案时，最新版本是 3.6.0。我建议更新到那个。
评论
0赞
in2d
7/30/2021
点对点！谢谢你的回答，也非常有趣的解决方案。
1赞
Rory McCrossan
7/30/2021
没问题，很乐意帮忙
评论