jquery next siblings

Question

Hi stackoverflow! (first post!)

Ive been trying to get this problem solved, but I cant seem to figure it out without some serious workarounds. if I have the following html code:

<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's 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 dont want to do that.

Any suggestions?

Answer 1

$("li.parent ~ li");

Answer 2

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.

Answer 3

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

Answer 4

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>

Answer 5

Thanks alot for the all the quick answers! I have to start using this site :)

I've redone my markup now, and I have no problems getting the elements that I wanted.

now.. how do I mark this question as answered..

Answer 6

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