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 - 從當前點獲取所有具有類的元素

回答

相關問題