jQuery 选择器,用于查找与选择器匹配的给定元素之后的第一个元素

Posted

技术标签:

【中文标题】jQuery 选择器,用于查找与选择器匹配的给定元素之后的第一个元素【英文标题】:jQuery selector for finding the first element after a given element that matches a selector 【发布时间】:2012-05-22 17:52:39 【问题描述】:

假设我有这个 html

 <textarea>blah</textarea>
 <br>
 <div class="select_this">hello!</div>

当我已经识别了 textarea 时,如何选择具有“select_this”类的 DIV?我不想在整个文档上使用类选择器,因为我正在处理大型文档,并且在旧浏览器中类查找速度很慢。

jQuery .next() 似乎没有解决问题,closest() 只查找 DOM 树,而 .nextUntil() 符合我需要的所有内容,除了“select_this”div。还有其他选择吗?

【问题讨论】:

Quite related answer on a very similar question 【参考方案1】:

有两种方法可以做到。

如果您只有几个兄弟姐妹,请使用此选项:

$('textarea').nextAll('div.select_this').first();

这样做的缺点是它会测试每个后续元素以查看它是否与选择器匹配,即使在找到第一个元素之后也是如此。如果您有 很多很多 个兄弟姐妹,请使用它来节省评估:

$('textarea').nextUntil('div.select_this').andSelf().last().next();

还要注意,最好使用firstlast 方法,而不是它们对应的选择器(:first:last),因为浏览器本身并不理解选择器,这会降低表达式的速度相当大。

编辑以合并andSelf 下面的每条评论。

【讨论】:

如果两个元素彼此相邻,则第二个示例不起作用,因为 nextUntil() 调用返回一组空结果。 答案应该包括@tnunamak所说的内容。 @tnunamak 修改答案以考虑到这一点。【参考方案2】:

你想要nextAll:

jQuery(yourTextarea).nextAll('.select_this:first');

【讨论】:

好奇问题:通过使用 ":first",jQuery 是在第一个元素符合条件时停止查找,还是在整个 DOM 中搜索,然后只返回找到的第一个元素?跨度> @lonesomeday -- dang,这不好,有没有办法完成前者? @ElliotB。请参阅我的答案,它正是针对这一点:-)

以上是关于jQuery 选择器,用于查找与选择器匹配的给定元素之后的第一个元素的主要内容,如果未能解决你的问题,请参考以下文章

JQuery学习历程2.JQuery选择器

什么 JQuery 选择器会排除与给定选择器匹配的父项的项目?

JQuery选择器特辑

[ jquery 过滤器 parentsUntil([expr|element][,filter]) ] 此方法用于在选择器的基础之上搜索查找当前元素的所有的父辈元素,直到遇到与表达式和限定条件相匹配

jQuery API 总结

jQuery之层次选择器