为什么这个 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() 循环中每个 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。我建议更新到那个。