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创建选择器，并为其提供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");
   }
});

Here是JavaScript中包含数组函数的文档。

与其查看您的元素属性值是否为数组值之一，还不如查看它。我的数组是否包含我的元素属性值。检查一个值是否在数组内vs检查一个数组是否包含指定值。

检查值是否在数组内

6 个答案: