当不是每个元素都选择class-jquery时,选择nth-last-child

时间:2016-04-01 00:12:47

标签: javascript jquery html jquery-selectors

我在jQuery中寻找类似以下 CSS4 选择器的内容: :nth-last-match(selector)

我需要从元素列表中选择倒数第二元素,而不是每个元素都有class - 请参阅以下示例,突出显示我希望实现的目标。< / p>

&#13;
&#13;
$('.select:nth-last-child(2)').addClass('selected');
&#13;
.test.selected { color:red; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="test">a</div>
<div class="test select">a</div>
<div class="test">a</div>
<div class="test select">a</div>
<div class="test">a</div>
<div class="test">a</div>
<div class="test select">EXPECTED SELECTION</div> //This element should be selected
<div class="test">a</div>
<div class="test select">a</div>
<div class="test">a</div>
</div>
&#13;
&#13;
&#13;

非常感谢。

1 个答案:

答案 0 :(得分:2)

您可以将 .get() 方法与否定参数值一起使用:

var expected = $('div .select').get(-2);
$(expected).css('background', 'red');

因此,.get(-1)是此集合的最后一个元素,.get(-2)是结尾的第二个元素。
检查以下代码段

&#13;
&#13;
var expected = $('div .select').get(-2);
$(expected).css('background', 'red');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="test">a</div>
  <div class="test select">a</div>
  <div class="test">a</div>
  <div class="test select">a</div>
  <div class="test">a</div>
  <div class="test">a</div>
  <div class="test select">EXPECTED SELECTION</div>
  <div class="test">a</div>
  <div class="test select">a</div>
  <div class="test">a</div>
</div>
&#13;
&#13;
&#13;