jQuery - 查找第 n 个最后出现的元素答案

【问题标题】：jQuery - Find nth last occurrence of elementjQuery - 查找第 n 个最后出现的元素
【发布时间】：2012-09-12 08:27:43
【问题描述】：

我有以下 HTMl 结构，我无法更改。

<div class="X">
    <ul>
        <li><a><img></a></li>
        <li><a><img></a></li>
        <li><a><img></a></li>
        <li><a><img></a></li>
        <li><a><img></a></li>
        <li><a><img></a></li>
        <li><a><img></a></li>
        <li><a><img></a></li>
        <li><a><img></a></li>
        <li><a><img></a></li>
    </ul>
</div>

li 项目的数量各不相同。我想从后面选择第n个元素并修改img src。

这是我目前所拥有的：

$('div.X').find('img').css('background-color', 'red');

我需要一些方法来遍历 .find 的结果，然后以某种方式选择倒数第 n 个元素。我在想我应该以某种方式反转列表，这样我就可以使用 nth-child() 选择器。

我发现了各种其他 nth 相关问题，但我无法弄清楚如何解决这个问题。

非常感谢任何帮助。

【问题讨论】：

nth 每次都不同吗？还是总是last - 1 或last - 2 等...？
在我的情况下它实际上是最后一个 -1，但我想我会写 nth 以便其他人更容易找到和使用。
好的，现在问题更清楚了，您可以使用$('.X li:nth-last-child(2) img').attr('src', 'newSrc'); :-)
@andyb：小心：:nth-last-child() is not supported by jQuery，尽管是 CSS 选择器。如果它有效，那只是因为浏览器本身支持它。

标签： jquery jquery-selectors css-selectors

【解决方案1】：

给你...http://jsfiddle.net/bYaRx/

我的实现可能有点过火了。我工作很无聊。这是获取正确 img 标签的相关 jQuery：

var $img = $('.X img');
$img.filter(':eq('+($img .length - (n+1))+')');

【讨论】：

很棒的解决方案，效果很好。我不知道 :eq 选择器。我结束了使用 .eq() 函数，因为它允许使用负值。 $('div.X').find('img').eq(-2).attr('src', newImg);非常感谢您的快速和彻底的帮助！非常感谢，会带我永远:-)

【解决方案2】：

$('div.X img:eq(' + ($('div.X img').length - n) + ')')

n 是你想要的返回数。

请注意，我使用的是 :eq() 而不是 :nth-child() - 它们不一样。

注意2：这里可能会出现off-by-one错误，所以一定要测试一下。

【讨论】：