Question

当我点击链接时，我需要找到具有ID属性的下一个<section>并返回其ID。

所以给定以下标记和javascript，我希望点击链接将“section_3”写入控制台。

<section id="section_1">
    <a href="#" class="findNext">Find</a>
</section>
<section></section>
<section id="section_3"></section>
<section id="section_4"></section>

和

$('a.findNext').click(function() {
    var nextSectionWithId = $(this).closest("section").next("section[id]");
    if (nextSectionWithId) {
        var sectionId = nextSectionWithId.attr('id');
        console.log(sectionId)
    }
});

但这不起作用。我已设置the code up here in jsFiddle。

为什么这不起作用？

Answer 1

尝试：

var nextSectionWithId = $(this).closest("section").nextAll("section[id]:first");

或

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").filter(':first');

<强> Fiddle

你不能使用next，因为next只会在下一个元素中查找匹配项。因此，您可以在选择器中使用 nextAll 与:first结合使用。

<强>更新

您可以在jquery中使用first()方法来获取集合中的第一个元素，这似乎是一个更快的选项。

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").first();

可能是这个原因：

因为：首先是jQuery扩展而不是CSS规范的一部分，使用的查询：首先不能利用本机DOM querySelectorAll（）方法提供的性能提升。要在使用时获得最佳性能：首先选择元素，首先使用纯CSS选择器选择元素，然后使用.filter（“：first”）。

Coutesy @ T.J。克劳德

Answer 2

使用.nextAll()

DEMO

var nextSectionWithId = $(this).closest("section").nextAll("section[id]")[0].id;

DEMO

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").eq(0).attr('id');

DEMO

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").attr('id');

如何使用jQuery查找具有ID属性的下一个元素

2 个答案: