使用jQuery选择匹配与clicked元素相邻的类的兄弟元素

时间:2014-02-28 17:40:05

标签: jquery

鉴于此元素列表:

<ul id="menu3">
    <li>DELI MEATS</li>
    <li class="subhead">Ham</li>
    <li class="sub">Cooked Ham</li>
    <li class="sub">Pepper Ham</li>
    <li class="sub">Tavern Ham</li>
    <li class="sub">Italian Brand Ham</li>
    <li class="subhead">Roast Beef</li>
    <li class="sub">Roast Beef</li>
    <li class="sub">Italian Style Roast Beef</li>
    <li>Turkey</li>
    <li>Italian</li>
    <li class="subhead">Bologna</li>
    <li class="sub">Deli Bologna</li>
    <li class="sub">Garlic Bologna</li>
    <li>Liverwurst</li>
    <li>Pepperoni</li>
    <li>Pastrami</li>
    <li>Corned Beef</li>
</ul>

当点击第二个LI元素(“Ham”)时,我想用jQuery选择带有class =“sub”的被点击元素之后的LI元素,但只能选择(包括)Italian Brand Ham。即,我希望它停止(并且不包括)烤牛肉,因为它没有class =“sub”。

$('#menu3 li').on('click', function(){
// Get LI element with class="sub" directly following the clicked element.
});

这可能吗?谢谢!

1 个答案:

答案 0 :(得分:0)

我认为你正在寻找nextUntil()

http://jsfiddle.net/NXwB5/

$(this).nextUntil('.subhead');

或者也许(仅选择.sub元素:

$(this).nextUntil('.subhead', '.sub')

虽然有一些边缘情况你没有定义,可能会改变确切的答案。