【问题标题】:Select nth-last-child when not every element has the selecting class-jquery当不是每个元素都有选择类 jquery 时选择 nth-last-child
【发布时间】:2023-03-18 21:40:01
【问题描述】:

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

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

$('.select:nth-last-child(2)').addClass('selected');
.test.selected { color:red; }
<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>

非常感谢。

【问题讨论】:

    标签: javascript jquery html jquery-selectors


    【解决方案1】:

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

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

    所以,.get(-1) 是这个集合的最后一个元素,.get(-2) 是倒数第二个元素。
    检查下面的sn-p

    var expected = $('div .select').get(-2);
    $(expected).css('background', 'red');
    <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>

    【讨论】:

    • 干得好;我完全忘记了get() 方法(或者它可以使用负索引)。 :)
    • 这个答案很完美,谢谢
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-20
    • 2011-09-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多