jQuery 折旧后迁移 :odd 选择器行为

Question

我在迁移最后一点代码以退出折旧时遇到问题。我们使用 jQuery 3.6，并且自 jQuery 3.4 以来，:odd 选择器已贬值。

As of jQuery 3.4, the :odd pseudo-class is deprecated. Remove it from your selectors and filter the results later using .odd() (available in jQuery 3.5.0 or newer).

但是，似乎很难保留每第 3 行的背景颜色。

.divGrey {
  background-color: #c0c0c0;
}

$('.container').filter(function () {
  return $(this).children().length === 3;
}).filter(':odd').addClass('divGrey'); // :odd Depreciated

我可以 .odd().addClass('divGrey') 但我失去了我想要保留的背景，每三分之一 child。我怎样才能做到这一点？我需要删除过滤功能吗？

感谢任何帮助 - 谢谢！

Answer 1

要执行您需要的操作，您可以使用 filter() 中提供给函数处理程序的索引参数和 return 一个布尔值来说明元素的索引是偶数还是奇数，如下所示：

$('.container').filter(i => i % 2).addClass('divGrey');

.divGrey {
  background-color: #c0c0c0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">0</div>
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>

请注意，我删除了第一个 filter() 调用，因为它与问题无关。

jQuery 折旧后迁移 :odd 选择器行为

Migrating :odd selector behaviour after jQuery Depreciation

javascript

jquery

filter

selector

migrate