[英]Check if value is within array
I have a list of elements with an attribute as the following 我有一个具有属性的元素列表,如下所示
<li grouping-id="6080" class="show-item"></li>
<li grouping-id="9938" class="show-item"></li>
<li grouping-id="9633" class="show-item"></li>
I need to check whether each grouping-id is within the array or not. 我需要检查每个分组ID是否在数组内。 If is NOT in the array, then remove the class "show-item"
如果不在数组中,则删除类“ show-item”
This is what I am trying 这就是我正在尝试的
var hiddenSoc = [6080,9633];
$("#filter .list li").each(function () {
if($(this).is( "[grouping-id="+ hiddenSoc +"]" )) {
$(this).removeClass("show-item");
}
});
But at the moment, "hiddenSoc" is taking all of the arrays at a time. 但是目前,“ hiddenSoc”一次获取了所有数组。 I need to check each one of them at a time and remove the class if it's not within the array
我需要一次检查它们中的每一个,如果不在数组中,则删除该类。
Using filter()
and indexOf()
使用
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>
The issue is because you're concatenating an entire array in to the attribute selector. 问题是因为您要将整个数组串联到属性选择器中。 You instead need to find values in the array which match the current
grouping-id
and then add/remove the class as necessary. 相反,您需要在数组中找到与当前
grouping-id
匹配的值,然后根据需要添加/删除类。
To do that you can use a combination of indexOf()
and toggleClass()
, like this: 为此,可以结合使用
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>
Note that the grouping-id
attribute is non-standard. 请注意,
grouping-id
属性是非标准的。 As such I converted it to a data-*
attribute, which can be used to store any custom metadata within an element. 这样,我将其转换为
data-*
属性,该属性可用于在元素内存储任何自定义元数据。 Also note the logic can be made even simpler if the show-item
class is not present in the DOM at all when the page loads. 还要注意,如果页面加载时DOM中根本没有
show-item
类,则逻辑可以变得更加简单。
Just as another options, you could also use not()
to perform the filtering. 就像其他选项一样,您也可以使用
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>
You could create a Selector by using reduce
and provide it with a prefix of JQuery's :not
. 您可以使用
reduce
创建一个Selector,并为其提供JQuery的:not
前缀。 This will select anything that doesn't match the specified query. 这将选择与指定查询不匹配的任何内容。
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>
You can check the attribute value if not includes in the array: 您可以检查属性值(如果未包含在数组中):
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>
For my part i would have made it his way : 就我而言,我本来可以做到的:
var hiddenSoc = [6080,9633];
$("#filter .list li").each(function () {
if(!hiddenSoc.includes(parseInt($(this).attr("grouping-id"))))
{
$(this).removeClass("show-item");
}
});
Here is the documentation for includes array function in JavaScript. 这是JavaScript中包含数组函数的文档。
Instead of looking if your element attribut value IS one of the array value, think it the other way. 而不是查看元素属性值是否为数组值之一,而是从另一角度考虑。 Does my array contains my element attribut value.
我的数组是否包含我的元素属性值。 Check if a value is within an array vs Check if an array contain a specifique value.
检查一个值是否在数组内vs检查一个数组是否包含指定值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.