檢查值是否在數組內

Question

我有一個具有屬性的元素列表，如下所示

<li grouping-id="6080" class="show-item"></li>
<li grouping-id="9938" class="show-item"></li>
<li grouping-id="9633" class="show-item"></li>

我需要檢查每個分組ID是否在數組內。 如果不在數組中，則刪除類“ show-item”

這就是我正在嘗試的

var hiddenSoc = [6080,9633];

$("#filter .list li").each(function () {

   if($(this).is( "[grouping-id="+ hiddenSoc +"]" )) {
          $(this).removeClass("show-item");
    }

});

但是目前，“ hiddenSoc”一次獲取了所有數組。 我需要一次檢查它們中的每一個，如果不在數組中，則刪除該類。

Answer 1

使用filter()和indexOf()

 var hiddenSoc = [6080, 9633]; $("#filter .list li").filter(function() { return hiddenSoc.indexOf(+$(this).attr("grouping-id")) > -1; }).removeClass("show-item"); 

 .show-item { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter"> <ul class="list"> <li grouping-id="6080" class="show-item">1</li> <li grouping-id="9938" class="show-item">2</li> <li grouping-id="9633" class="show-item">3</li> </ul> </div> 

Answer 2

問題是因為您要將整個數組串聯到屬性選擇器中。 相反，您需要在數組中找到與當前grouping-id匹配的值，然后根據需要添加/刪除類。

為此，可以結合使用indexOf()和toggleClass() ，如下所示：

 var hiddenSoc = [6080, 9633]; $("#filter .list li").each(function() { var $el = $(this); $el.toggleClass('show-item', hiddenSoc.indexOf($el.data('grouping-id')) != -1); }); 

 .show-item { color: #C00; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter"> <ul class="list"> <li data-grouping-id="6080" class="show-item">A</li> <li data-grouping-id="9938" class="show-item">B</li> <li data-grouping-id="9633" class="show-item">C</li> </ul> </div> 

請注意， grouping-id屬性是非標准的。 這樣，我將其轉換為data-*屬性，該屬性可用於在元素內存儲任何自定義元數據。 還要注意，如果頁面加載時DOM中根本沒有show-item類，則邏輯可以變得更加簡單。

Answer 3

就像其他選項一樣，您也可以使用not()執行過濾。

 var hiddenSoc = [ 6080, 9633 ]; var exclusions = hiddenSoc.map( it => `[grouping-id="${it}"]` ).join( ',' ); $( '#filter .list li' ).not( exclusions ).removeClass( 'show-item' ); 

 #filter .list li:not(.show-item) { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter"> <ul class="list"> <li grouping-id="6080" class="show-item">6080</li> <li grouping-id="9938" class="show-item">9938</li> <li grouping-id="9633" class="show-item">9633</li> </ul> </div> 

Answer 4

您可以使用reduce創建一個Selector，並為其提供JQuery的:not前綴。 這將選擇與指定查詢不匹配的任何內容。

 var hiddenSoc = [6080,9633], socSelector = () => hiddenSoc.reduce((acc, v, i) => acc += `${i > 0 ? ",":""}[grouping-id="${v}"]`,""); $(`li:not('${socSelector()}')`).each((i,e) => e.classList.remove("show-item")); 

 .show-item { display: list-item; } li { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li grouping-id="6080" class="show-item">stuff</li> <li grouping-id="9938" class="show-item">stuff</li> <li grouping-id="9633" class="show-item">stuff</li> 

Answer 5

您可以檢查屬性值（如果未包含在數組中）：

 var hiddenSoc = [6080,9633]; $('#filter .list li').each(function(){ var gid = Number($(this).attr('grouping-id')); if(!hiddenSoc.includes(gid)) $(this).removeClass("show-item"); }); 

 .show-item{ color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter"> <ul class="list"> <li grouping-id="6080" class="show-item">111</li> <li grouping-id="9938" class="show-item">222</li> <li grouping-id="9633" class="show-item">333</li> </ul> </div> 

Answer 6

就我而言，我本來可以做到的：

var hiddenSoc = [6080,9633];

$("#filter .list li").each(function () {
   if(!hiddenSoc.includes(parseInt($(this).attr("grouping-id"))))
   {
      $(this).removeClass("show-item");
   }
});

這是JavaScript中包含數組函數的文檔。

而不是查看元素屬性值是否為數組值之一，而是從另一角度考慮。 我的數組是否包含我的元素屬性值。 檢查一個值是否在數組內vs檢查一個數組是否包含指定值。