CODEWITHSUNDEEP
javascriptjqueryselectortraversalsiblings
Contra
Contra

Reputation: 2783

jquery next siblings

I've been trying to get this problem solved, but I can't seem to figure it out without some serious workarounds.

if I have the following 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>

Now, how do I now just select the <li> tags following the first parent (or second, for that matter)? Basically selecting an <li> with class="parent" and the following siblings until it reaches another <li> with the parent class.

I could restructure the list with nested lists, but I don't want to do that. Any suggestions?

Upvotes: 3

Views: 18600

Answers (7)

The Merovingian
The Merovingian

Reputation: 211

actually, you can easily do this using nextUntil(). no need to write your own "nextUntil" since it already exists.

ex. -

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

or as suggested by Vincent -

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

Upvotes: 11

John Guise
John Guise

Reputation: 1

<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>

Upvotes: 0

kthiagar
kthiagar

Reputation: 73

I know this is a very old thread, but Jquery 1.4 has a method called nextUntil, which could be useful for this purpose: http://api.jquery.com/nextUntil/

Upvotes: 0

Vincent Robert
Vincent Robert

Reputation: 36120

You will have to run the loop yourself since jQuery does not know how to stop on a specific condition.

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");

But you may be better using a really structured list for your parent/children relationship

<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>

Upvotes: 1

tvanfosson
tvanfosson

Reputation: 532455

I don't think there is a way to do this without using each since any of the other selectors will also select the second parent and it's next siblings.

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

Upvotes: 2

Mark Hurd
Mark Hurd

Reputation: 13076

The root of your problem is that the <li>s you have classed as parent really are NOT parents of the <li>s "below" them. They are siblings. jQuery has many, many functions that work with actual parents. I'd suggest fixing your markup, really. It'd be quicker, cleaner, easier to maintain, and more semantically correct than using jQuery to cobble something together.

Upvotes: 6

Ropstah
Ropstah

Reputation: 17794

$("li.parent ~ li");

Upvotes: 0

Related Questions