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

我想弄清楚如何从DOM中的某个点向前找到与特定选择器匹配的所有元素。jQuery - 从当前点获取所有具有类的元素

我有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项属性过滤器类，像这样的改变事件......

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

什么我想要做的是，在变化事件中，获取所有选中的NEXT并重置它们的值。所以如果我在第二个，并且我改变了这个值，这个事件就会被触发，并且第3,4,5等选项将会被重置。但第一个和第二个将保持顺利。

我想我会使用jQuery的nextAll（）方法，但我很困惑它的用法。

任何人都可以指向正确的方向或示例吗？

来源

2016-11-18 Phil

[吗？'nextAll'文档似乎涵盖这不够好（HTTPS： //api.jquery.com/nextAll/） – Liam

它的确如此。 '$（this）.nextAll（）。val（newValue）' – nicovank

@Liam - 我的HTML已更新。我忘记了每个选择是在div封装 – Phil

您可以使用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以及。

来源

2016-11-18 13:20:49 Deep

我更新了我的例子中的HTML是否仍然适用 – Phil

OP已经更新了他的HTML – Liam

@Phil：根据新的html更新了我的答案。 – Deep

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

来源

2016-11-18 13:19:01 ScanQR

OP已更新他的HTML – Liam

@Liam更新的答案。 – ScanQR

'最接近'总是需要一个选择器：https://api.jquery.com/closest/ – Liam

您也可以使用此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>

来源

2016-11-18 13:23:29 RonyLoud

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

回答

相关问题