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)
jQuery 1.4 now has the .nextUntil(selector) function:
$('div.parent').toggle(
function() {
$(this).nextUntil('div.parent').hide();
},
function() {
$(this).nextUntil('div.parent').show();
}
);
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>
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With