Phil Phil - 22 days ago 5
HTML Question

jQuery - Get all elements with class from current point on

I'm trying to figure out how to get all elements matching a specific selector from a certain point forward in the DOM.

I have HTML that looks like this

<div class="attribute-filter-wrapper">
<select class="build-item-attribute-filter">
...options...
</select>
</div>
<div class="attribute-filter-wrapper">
<select class="build-item-attribute-filter">
...options...
</select>
</div>
<div class="attribute-filter-wrapper">
<select class="build-item-attribute-filter">
...options...
</select>
</div>
<div class="attribute-filter-wrapper">
<select class="build-item-attribute-filter">
...options...
</select>
</div>
<div class="attribute-filter-wrapper">
<select class="build-item-attribute-filter">
...options...
</select>
</div>


I also have bound to the change event of the .build-item-attribute-filter class like so...

$(document).on('change', '.build-item-attribute-filter', function(e) {
// function code here
});


What I want to do, is in the change event, get all selects that are NEXT and reset their value. So if I'm on the second one and I change the value, the event will be triggered and the 3rd, 4th, 5th, etc selects will reset. But the first and second will stay in-tact.

I thought I would use the jQuery nextAll() method, but I'm confused on it's usage.

Can anyone point me in the right direction or show example?

Answer

you can achieve this using the nextAll() and map function of JQuery. Updated as per new html

 $(document).on('change', '.build-item-attribute-filter', function(e) {

        $.map( $(this).parent().nextAll(), function( sel, i ) {
             $($(sel).find('select')[0]).val("");
         });
});

Working example : https://plnkr.co/edit/nxMScu2g1qHbcwuVSKz7?p=preview

Same link for updated html as well.