为什么这个 JQuery 循环不会改变元素少于 4 的 CSS

Question

为什么这个脚本不循环遍历每个 ul.products 元素并计算 li.product 元素，然后将其更改为 css（背景为黄色）。

当我将 < 更改为 > 时，所有元素的背景颜色都会更改。 到目前为止，我知道问题在于这个脚本检查每个父元素 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>

https://jsfiddle.net/p9rsuhx3/2/

Answer 1

问题是因为您的代码查看 DOM 中的所有.product元素，而不是在each()循环中的each() ul中的特定元素。

要纠正此问题，您可以使用$(this)来引用当前ul ，然后检索其子li元素：

 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。 我建议更新到那个。

Answer 2

您的代码应该可以正常工作。 尝试将 jquery 包含到您的 jsfiddle 中（在提供的链接中，您仅使用纯 js）。 您可以通过按下按钮“JavaScript + No-Library (pure JS)”来实现