如何简化这个 jquery 树遍历？答案

【问题标题】：How to simplify this jquery tree traversal?如何简化这个 jquery 树遍历？
【发布时间】：2012-10-02 21:31:18
【问题描述】：

HTML

...
<a id="delete1" href="http://www.example.com">TEST</a>
<p>First</p>
<p>Second</p>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div id="hidden-qsd">123</div>
...

var id = $('#delete1').nextUntil("div[id^='hidden']").next().last().attr('id');

我想获取位于链接“#delete1”之后的以“hidden”开头的最近“div”的 id。
之前的代码可以正常工作，但我认为有一种更简单的方法。

【问题讨论】：

标签： jquery jquery-traversing

【解决方案1】：

$('#delete1').nextAll('[id^="hidden"]').attr('id')

nextAll()就够了

示例 jsbin：http://jsbin.com/usowej/3/edit

注意：如果您有多个 id 以 hidden 开头的元素，请使用

$('#delete1').nextAll('[id^="hidden"]:first').attr('id')

要检索第一次出现，请参阅http://jsbin.com/usowej/4/edit

【讨论】：

是的，它更简单，谢谢。但是，“nextAll”不会在第一个结果之后停止：它会在删除链接之后读取整个 DOM，以查找所有出现。所以，我们或许可以找到更有效的解决方案。
如果你有多个元素的 id 以 hidden 开头，只需使用 $('#delete1').nextAll('[id^="hidden"]:first').attr('id') 和 :first 伪类

【解决方案2】：

您可以使用nextAll(selector) 来获取元素之后的下一个兄弟：

var id = $('#delete1').nextAll("div[id^='hidden']").prop('id');

http://api.jquery.com/nextAll/

【讨论】：