如何在 jQuery 中选择特定元素
我有以下 html 语法,
<ul>
<li class="heading">link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="heading">link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="heading">link</li>
</ul>
我想选择我单击的普通 li 元素之后的第一个 .heading 元素。我尝试使用 .closest() 函数,但我没能做到正确。使用 jQuery
I have the following html syntax
<ul>
<li class="heading">link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="heading">link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="heading">link</li>
</ul>
I want to select the first .heading element that comes after a normal li element that i click.I tried using the .closest() function but i didn't manage to get it right.With jQuery
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
在
click
处理程序中执行以下操作:nextAll()
检索当前元素之后与选择器匹配的所有同级元素,因此请使用:first
选择器仅针对第一个。
nextAll
不应与next
混淆,后者只考虑下一个元素(并且仅在与给定选择器匹配时才返回它)。closest
不起作用,因为它仅检查当前元素的祖先,其中-因为我们想要找回兄弟姐妹。你可以在这里看到一个 JS Fiddle; http://jsfiddle.net/kuroir/5e3gz/1/
Inside the
click
handler do:nextAll()
retrieves all the siblings after the current element that match the selector, so use use the:first
selector to only target the first.nextAll
should not be confused withnext
, which only considers the next element (and will only return it if it matches the given selector).closest
did not work as it examines only the ancestors of the current element, where-as we want to retrieve the siblings.You can see a JS Fiddle of this working here; http://jsfiddle.net/kuroir/5e3gz/1/
使用“相邻同级”选择器,即加号:
它会选择紧邻
class='heading'
元素之后的所有li
元素。请注意,这是标准 CSS,因此上述选择器也适用于您的样式表(除 IE6 之外的所有浏览器都支持),如下所示:
另请参阅 http://quirksmode.org/css/selector_adjacent.html 了解此选择器如何工作的说明。
Use the "adjacent sibling" selector, which is the plus sign:
This picks all
li
elements that are immediately after an element withclass='heading'
.Note, this is standard CSS, so the above selector will also work in your stylesheets (supported in all browsers except IE6), like so:
See also http://quirksmode.org/css/selector_adjacent.html for a description of how this selector works.
你可以这样做:
检查此以获得更多帮助:
http://api.jquery.com/next/
you can do this:
Check this for more help:
http://api.jquery.com/next/