jquery select siblings 'until'

Question

I have a DOM in the form of

Answer 1

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

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

Answer 2

* See @foson answer for jquery 1.4+ *

Check out Ben Almans until utils.

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

Answer 3

I think no need for the above custom functions, JQuery supports this functionality by nextUntil(selector, filter) function, but you should add filter to only apply your script to the filtered elements not to all next elements:

//hide all .child elements
$('div.child').hide();
$('div.parent').click(function() {
  //Toggle (show or hide) only .child elements until finding .parent element.
  $(this).nextUntil('div.parent', 'div.child').slideToggle('slow');
});

Answer 4

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>

...