将类添加到jquery中的第n个子范围

Adding class to nth-child range in jquery

本文关键字：范围 添加 jquery      更新时间：2023-09-26

我正试图用这段代码将类添加到第n个子范围，但它不起作用：

$('.station li:nth-child(' + strno + '):nth-child(' + endno + ')').attr('class', 'current');

如果我试图使用此代码更改特定元素的类，那么它确实有效：

$('.station li:nth-child(' + strno + ')').attr('class', 'current');

你知道吗？

您可以使用gt()和lt()选择器来选择一系列类似子项的内容。

var strno = 1, endno = 3; // 0 based index
$('.station li:gt(' + (strno - 1) + '):lt(' + (endno - strno + 1) + ')').addClass('current');
.current {
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="station">
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

您正在尝试使用诸如之类的选择器

.station li:nth-child(2):nth-child(10)

期望这会建立nth-child元素的范围，但事实并非如此，你错了。

这建立了一种"answers"逻辑，在这种逻辑中，您告诉选择器引擎查找第二个和第十个子元素。显然，一个元素不可能同时存在。

我建议您使用.filter从整套.station li元素中只选择您感兴趣的元素。

$('.station li').filter(function (e){
  var idx = $(this).index();
  return idx>=1 && idx<4;
}).css("background-color","red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="station">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
</div>

相关文章：