jquery下一个兄弟姐妹

时间:2009-06-04 12:45:10

标签: javascript jquery selector traversal siblings

我一直试图解决这个问题,但如果没有一些严肃的解决方法,我似乎无法弄明白。

如果我有以下HTML:

<ul>
    <li class="parent"> headertext </li>
    <li> text </li>
    <li> text </li>
    <li> text </li>
    <li class="parent"> headertext </li>
    <li> text </li>
    <li> text </li>
</ul>

现在,我现在如何选择第一个父母后面的<li>标签(或者第二个)?基本上选择带有<li>的{​​{1}}和以下兄弟姐妹,直到它与父类达到另一个class="parent"

我可以使用嵌套列表重新构建列表,但我不想这样做。有什么建议?

7 个答案:

答案 0 :(得分:11)

实际上,您可以使用nextUntil()轻松完成此操作。 不需要编写自己的“nextUntil”,因为它已经存在。

离。 -

$(".a").nextUntil(".b");

或文森特建议 -

$(".parent:first").nextUntil(".parent");

答案 1 :(得分:6)

问题的根源在于,您被归类为父母的<li>实际上不是<li> s“下面的父母”。他们是兄弟姐妹。 jQuery有许多功能可以与实际的父母一起工作。我建议你真的修改你的标记。与使用jQuery拼凑一些东西相比,它更快,更干净,更易于维护,并且语义更正确。

答案 2 :(得分:2)

我不认为有没有办法在不使用每个选项的情况下执行此操作,因为任何其他选择器也将选择第二个父级和它的下一个兄弟。

function getSibs( elem ) {
    var sibs = [];
    $(elem).nextAll().each( function() {
        if (!$(this).hasClass('parent')) {
            sibs.push(this);
        }
        else {
            return false;
        }
    });
    return $(sibs);
 }

答案 3 :(得分:1)

你必须自己运行循环,因为jQuery不知道如何在特定条件下停止。

jQuery.fn.nextUntil = function(selector)
{
    var query = jQuery([]);
    while( true )
    {
        var next = this.next();
        if( next.length == 0 || next.is(selector) )
        {
            return query;
        }
        query.add(next);
    }
    return query;
}

// To retrieve all LIs avec a parent
$(".parent:first").nextUntil(".parent");

但是你可能会更好地使用一个真正结构化的列表来表示你的父/子关系

<ul>
<li class="parent"> <span>headertext</span>
    <ul>
    <li> text </li>
    <li> text </li>
    <li> text </li>
    </ul>
</li>
<li class="parent"> <span>headertext</span>
    <ul>
    <li> text </li>
    <li> text </li>
    </ul>
</li>
</ul>

答案 4 :(得分:0)

$("li.parent ~ li");

答案 5 :(得分:0)

<html>
    <head>
        <script type="text/javascript">
            $(document).ready(function() {
                $("a").click(function() {
                    var fred = $("li").not('.parent').text();
                    $('#result').text(fred);           
                });
            });         
        </script>
    </head>
    <body>
        <a href="#">Click me</a>
        <ul>
            <li class="parent"> headertextA </li>
            <li> text1 </li>
            <li> text2 </li>
            <li> text3 </li>
            <li class="parent"> headertextB </li>
            <li> text4 </li>
            <li> text5 </li>
        </ul>
        <div id="result"></div>
    </body>
</html>

答案 6 :(得分:0)

我知道这是一个非常老的线程,但是Jquery 1.4有一个名为nextUntil的方法,它可以用于此目的: http://api.jquery.com/nextUntil/