Question

我正在尝试使用此代码将类添加到nth-child范围，但这不起作用：

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

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

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

你有什么想法吗？

Answer 1

您正在尝试使用

等选择器

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

期望设置nth-child元素的范围 - 它没有，你错了。

这设置了一种＆＃34;和＆＃34;逻辑，你告诉选择器引擎找到第二个和第10个孩子的元素。显然，元素不能同时存在。

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

＆＃13;

$('.station li').filter(function (e){
  var idx = $(this).index();
  return idx>=1 && idx<4;
}).css("background-color","red");

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用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>

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

2 个答案: