jquery select siblings 'until'

Question

I have a DOM in the form of

<input class="parent"></div>
<input class="child"></div>
<input class="child"></div>
<input class="parent"></div>
<input class="child"></div>
...

which I know is not Right and the right way to do this would be to reform the HTML, but lets say that is not possible.

How can I get jquery to select all children of one parent (that is select all .children until .parent)

Answer 1

You can iterate through the nextAll div siblings elements until you find the following .parent, check this example:

$('.parent').click(function() {
  $(this).nextAll('div').each(function() {
    if ($(this).is('.parent')) {
      return false; // next parent reached, stop
    }
    $(this).toggleClass('highlight');
  });
});

Markup used:

<div class="parent">parent 1</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="parent">parent 2</div>
<div class="child">child</div>
<div class="parent">parent 3</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>

...

Answer 2

Check out Ben Almans until utils.

It gives you 3 usefull methods: nextUntil, prevUntil, parentsUntil.

Answer 3

jQuery 1.4 now has the .nextUntil(selector) function:

    $('div.parent').toggle(
        function() {
            $(this).nextUntil('div.parent').hide();
         },
        function() {
            $(this).nextUntil('div.parent').show();
        }
    );