javascript 如何使用jQuery查找具有ID属性的下一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19569144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find the next element which has an ID attribute using jQuery
提问by Digbyswift
When I click on a link, I need to find the next <section>that has an ID attribute and return its ID.
当我单击一个链接时，我需要找到下一个<section>具有 ID 属性的链接并返回其 ID。
So given the following markup and javascript, I would expect clicking on the link to write "section_3" to the console.
因此，鉴于以下标记和 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>
and
和
$('a.findNext').click(function() {
var nextSectionWithId = $(this).closest("section").next("section[id]");
if (nextSectionWithId) {
var sectionId = nextSectionWithId.attr('id');
console.log(sectionId)
}
});
But this doesn't work. I have set the code up here in jsFiddle.
但这不起作用。我已经在 jsFiddle 中设置了代码。
Any ideas why this is not working?
任何想法为什么这不起作用？
回答by PSL
Try :
尝试 ：
var nextSectionWithId = $(this).closest("section").nextAll("section[id]:first");
or
或者
var nextSectionWithId = $(this).closest("section").nextAll("section[id]").filter(':first');
You cannot use next because next will look for a match only in the next element. So you can instead use nextAllcombined with :firstin the selector.
您不能使用 next，因为 next 只会在下一个元素中查找匹配项。因此，您可以在选择器中将 nextAll与:first结合使用。
Update
更新
You can use the first()method in jquery to fetch the first element in the collection as well which seems like a faster option.
您也可以使用jquery 中的first()方法来获取集合中的第一个元素，这似乎是一个更快的选择。
var nextSectionWithId = $(this).closest("section").nextAll("section[id]").first();
Probably could be this reason:
大概是这个原因：
Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :first to select elements, first select the elements using a pure CSS selector, then use .filter(":first").
因为 :first 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :first 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在使用 :first 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":first")。
Coutesy @T.J. Crowder
礼貌@TJ克劳德
回答by Tushar Gupta - curioustushar
Use .nextAll()
var nextSectionWithId = $(this).closest("section").nextAll("section[id]")[0].id;
var nextSectionWithId = $(this).closest("section").nextAll("section[id]").eq(0).attr('id');
var nextSectionWithId = $(this).closest("section").nextAll("section[id]").attr('id');
