Javascript jQuery-从上的当前点获取具有类的所有元素

我试图弄清楚如何从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>

我想做的是，在更改事件中，获取所有下一个选择并重置它们的值。因此，如果我在第二个位置，并且我更改了值，那么事件将被触发，第三、第四、第五等选择将重置。但第一个和第二个将保持机智

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

---

有人能给我指出正确的方向或演示示例吗？

您可以使用jQuery.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("");
   });
});

---

可以使用jQuery.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("");
   });
});

---

可以使用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("");
         });
});

工作示例：

---

更新的html也有相同的链接。

您可以使用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("");
         });
});

工作示例：

更新的html也有相同的链接。

您也可以使用以下链接：

JS:

$（document）.on（'change'，'build item attribute filter'，函数（e）{
对于（i=$（this）.parent（）.index（）+1；i您还可以使用以下内容：

JS:

$（document）.on（'change'，'build item attribute filter'，函数（e）{
对于（i=$（this）.parent（）.index（）+1；i它是。
$（this）.nextAll（）.val（newValue）
@Liam-我的HTML已经更新。我忘记了每个选择都在一个div包装中它是。
$（this）.nextAll（）.val（newValue）
@Liam-我的HTML已经更新。我忘记了每个选择都在一个div包装器中。我在我的示例中更新了HTML。这是否仍然适用于
$（$（sel.children（）[0]）.val（“”）；
将是脆弱的。它现在可以工作，但如果标记changes@Liam感谢您指出。更新了答案，使之更具体地适用于子选择元素。@Deep-谢谢！您的答案工作得很好！我在示例中更新了HTML，这是否仍然适用于
$（$（sel）.children（）[0]）.val（“”）；
将是脆弱的。它现在可以工作，但如果标记changes@Liam谢谢您的指点。更新了答案，使之更适合儿童选择元素。@Deep-谢谢！您的答案工作得很好！@Liam you beauty@Liam you beauty。
<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>