如何从祖先中获得 JQuery 的下一步

Posted 2023-02-25

【中文标题】如何从祖先中获得 JQuery 的下一步

【英文标题】：How to get next with JQuery out of ancestor

【发布时间】：2012-05-10 14:04:35

【问题描述】：

我想要当前“a”的下一个“a”元素。当电流为 2,3,4 时，我用 $('a.current').nextAll('a') 捕获 3,4,5 但当电流为 5 时，我无法捕获下一个 'a'。 如果有人有解决方案...

<div id="slides">
    <ul>
     <li>
        <a href="" class='current'>2</a>
        <a href="" >3</a>
        <a href="" >4</a>
        <a href="" >5</a>
     </li>
      <li>
        <a href="" >6</a>
        <a href="" >7</a>
        <a href="" >8</a>
        <a href="" >9</a>
     </li>
    </ul>
</div>

【问题讨论】：

你使用的是.nextAll，所以你想要.current之后的所有a元素，对吧？

是的，我只想要第一个

感谢所有这些回复，我不知道哪个是计算最好的

【参考方案1】：

var curr = $('a.current'),            // get the current
    a = curr.closest('ul').find('a'), // get all the "a" elements
    idx = a.index(curr),              // get the index of the current among all
    nextall = a.slice(idx + 1);       // slice those greater than the current

现场演示： http://jsfiddle.net/eaXdc/

---

如果你只想要下一个，改变这个：

a.slice(idx + 1);

到这里：

a.eq(idx + 1);

【参考方案2】：

试试这个：

var $curr = $('a.current'),
    $next = $curr.next('a');

$next.length || ($next = $curr.parent().next().find('a:first'));

此外，您当前正在使用nextAll，这将返回所有以下a 元素，而您似乎只需要a 之后的第一个元素。

【参考方案3】：

var next = $(this).index() < $(this).parent().children('a').length-1 ? 
           $(this).next() : 
           $(this).parent().next('li').children('a:first');

FIDDLE

【参考方案4】：

因为.nextAll() 只返回匹配元素的兄弟姐妹

6,7,8,9 不是 5 的兄弟，因为它们在不同的parent(li)下

你需要那些你必须使用 jQuery 遍历 DOM 来获取那些 a 元素。

【参考方案5】：

如果你能够知道你在最后（没有结果），那么你应该能够跳到下一个li 并抓住所有后续的锚元素。

Here's how I approached it。我给了第五个锚元素一个 id 来表明它是我的current。当您的 current 目标没有 .nextAll() 子代（.size() 为 0）时，您可以执行以下操作以查找后续锚元素。

$("#5").parent().next("li").find("a").css("color","grey");​

颜色变化是为了帮助指示找到了哪些元素。看起来您有很多选择！

更新：如果您只想要第一个，您可以使用:first 指定捕获它，例如update。

$("#5").parent().next("li").find("a:first")