如何在 jQuery 中选择特定元素

发布于 2024-12-11 07:35:01 字数 463 浏览 0 评论 0原文

我有以下 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

末が日狂欢 2024-12-18 07:35:01

click 处理程序中执行以下操作:

$(this).nextAll('.heading:first');

nextAll()检索当前元素之后与选择器匹配的所有同级元素,因此请使用 :first选择器仅针对第一个。

nextAll 不应与 next 混淆,后者只考虑下一个元素(并且仅在与给定选择器匹配时才返回它)。

closest 不起作用,因为它仅检查当前元素的祖先,其中-因为我们想要找回兄弟姐妹。

你可以在这里看到一个 JS Fiddle; http://jsfiddle.net/kuroir/5e3gz/1/

Inside the click handler do:

$(this).nextAll('.heading:first');

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 with next, 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/

酷遇一生 2024-12-18 07:35:01

使用“相邻同级”选择器,即加号:

$('.heading+li')

它会选择紧邻 class='heading' 元素之后的所有 li 元素。

请注意,这是标准 CSS,因此上述选择器也适用于您的样式表(除 IE6 之外的所有浏览器都支持),如下所示:

.heading+li { .... }

另请参阅 http://quirksmode.org/css/selector_adjacent.html 了解此选择器如何工作的说明。

Use the "adjacent sibling" selector, which is the plus sign:

$('.heading+li')

This picks allli elements that are immediately after an element with class='heading'.

Note, this is standard CSS, so the above selector will also work in your stylesheets (supported in all browsers except IE6), like so:

.heading+li { .... }

See also http://quirksmode.org/css/selector_adjacent.html for a description of how this selector works.

山川志 2024-12-18 07:35:01

你可以这样做:

$('li').click(function(){
    $(this).nextAll('li.heading:first'); //This selects the one you want
});

检查此以获得更多帮助:
http://api.jquery.com/next/

you can do this:

$('li').click(function(){
    $(this).nextAll('li.heading:first'); //This selects the one you want
});

Check this for more help:
http://api.jquery.com/next/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文