Question

我想在类中搜索具有在数组中匹配的data-id属性的元素，并隐藏它们。

HTML：

<li class="list" data-id="1">one</li>
<li class="list" data-id="2">two</li>
<li class="list" data-id="3">three</li>
<li class="list" data-id="4">four</li>

我有一个数组： var dataIDcheck = ['1', '3']

关于如何搜索类.list并隐藏1和3（或数组中的任何内容）的任何想法？

Answer 1

var dataIDcheck = ['1', '3'];
$('[data-id="' + dataIDcheck.join('"], [data-id="') + '"]').hide();

http://jsbin.com/ojipaw/1/

Answer 2

您可以使用filter和inArray功能

 $('.list').filter(function(){
      return $.inArray($(this).data('id'),dataIDcheck) > -1
 }).hide(); // <-- hides any elements that have data-id found in array

Answer 3

var ids   = [1, 3],
    count = ids.length,
    parts = [];

for (var i = 0; i < count; i++) {
    parts.push('[data-id="' + ids[i] + '"]');
}

var selector = parts.join(',');

var elems = document.querySelectorAll(selector);

这适用于标准DOM（IE8 +），不需要任何库。您也可以查看querySelectorAll()文档。

Answer 4

for (id in dataIDcheck) {
    $('.list[data-id=' + dataIDcheck[id] + ']').hide()
}

Answer 5

为什么不是jquery的inArray()

var dataIDcheck = [1, 3];


$('.list').each(function() {
    if($.inArray($(this).data("id"),dataIDcheck) > -1) {
      $(this).fadeOut(); 
    }
});

fiddle

使用数组搜索元素的data-attribute并隐藏它

5 个答案: