Question

我正在试图弄清楚如何从DOM中的特定点向前获取与特定选择器匹配的所有元素。

我的HTML看起来像这样

<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>

我也绑定了.build-item-attribute-filter类的change事件，就像这样...

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

我想要做的是，在更改事件中，获取NEXT的所有选择并重置其值。因此，如果我在第二个并且我更改了值，则将触发事件并且第3，第4，第5等选择将重置。但第一个和第二个将保持一致。

我以为我会使用jQuery nextAll（）方法，但我对它的使用感到困惑。

有人能指出我正确的方向还是展示榜样？

Answer 1

您可以使用jQuery .nextAll（）方法，

文档：https://api.jquery.com/nextAll/

编辑：对于更新后的问题可能是解决方案。

$(document).on('change', '.build-item-attribute-filter', function(e) {
   // function code here
   var parent = $(this).closest('.attribute-filter-wrapper');
   $(parent).nextAll('.attribute-filter-wrapper').each(function(){
         $(this).find('.build-item-attribute-filter').val("");
   });
});

Answer 2

你可以使用JQuery的nextAll（）和map函数来实现这一点。根据新的HTML更新

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

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

工作示例：https://plnkr.co/edit/nxMScu2g1qHbcwuVSKz7?p=preview

更新的html的相同链接。

Answer 3

您也可以使用此fiddle：

JS：

$(document).on('change', '.build-item-attribute-filter', function (e) {
            for (i = $(this).parent().index()+1 ; i <= $('select').length; i++)
            {
                $('select').eq(i).val(0);
            }
        });

HTML：

<div class="attribute-filter-wrapper">
    <select class="build-item-attribute-filter">
        <option value="0">--Select--</option>
        <option value="1">10</option>
        <option value="2">11</option>
    </select>
</div>
<div class="attribute-filter-wrapper">
    <select class="build-item-attribute-filter">
        <option value="0">--Select--</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>
<div class="attribute-filter-wrapper">
    <select class="build-item-attribute-filter">
        <option value="0">--Select--</option>
        <option value="1">3</option>
        <option value="2">4</option>
    </select>
</div>
<div class="attribute-filter-wrapper">
    <select class="build-item-attribute-filter">
        <option value="0">--Select--</option>
        <option value="1">5</option>
        <option value="2">6</option>
    </select>
</div>
<div class="attribute-filter-wrapper">
    <select class="build-item-attribute-filter">
        <option value="0">--Select--</option>
        <option value="1">7</option>
        <option value="2">8</option>
    </select>
</div>

jQuery - 从当前点开始获取类的所有元素

3 个答案: