通过比较两个数组进行JavaScript过滤

Question

DOM：

<div class='myDiv' data-catid='1,2,3'></div>
<div class='myDiv' data-catid='4,5'></div>
<div class='myDiv' data-catid='1,5,7'></div>
<div class='myDiv' data-catid='8,9'></div>
<div class='myDiv' data-catid='2,3,4'></div>

JS：

var filters = [2, 4];

我想循环遍历divs ，并隐藏那些在data-catid中没有类别ID的那些。

到目前为止我有这个：

$('.myDiv').each(function(i, el){               

  var itemCategories = $(el).data('catId').split(',');

  // Do check and then hide with $(el).css('visibility', 'hidden') 
  // if doesn't contain both filter id's in 'itemCategories';

});

Answer 1

使用filter()方法和javascript Array#every方法（或者可以使用Array#some方法）。

 var filters = [2, 4]; // get all elements with class `myDiv` $('.myDiv') // filter out elements .filter(function() { // generate array from catid attribute var arr = $(this) // get data attribute value .data('catid') // split based on `,` .split(',') // parse the string array, it's optional // if you are not parsing then convert Number to // String while using with indexOf .map(Number); // check all catid presents return !filters.every(function(v) { // check index of elements return arr.indexOf(v) > -1; }); // or with `some` method // return filters.some(function(v) { return arr.indexOf(v) === -1; }); // hide the elements }).hide(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='myDiv' data-catid='1,2,3'>1</div> <div class='myDiv' data-catid='4,5'>2</div> <div class='myDiv' data-catid='1,5,7'>3</div> <div class='myDiv' data-catid='8,9'>4</div> <div class='myDiv' data-catid='2,3,4'>5</div> 

---

仅供参考：对于旧浏览器，请检查every方法的polyfill选项 。

Answer 2

您可以使用jquery .filter()代替.each()来过滤所选元素，并使用String.prototype.indexOf()来检查数组中是否存在值。

 var filters = [2, 4]; $('.myDiv').filter(function(){ var num = $(this).data('catid').split(',').map(Number); return num.indexOf(filters[0]) == -1 || num.indexOf(filters[1]) == -1 }).hide(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='myDiv' data-catid='1,2,3'>1</div> <div class='myDiv' data-catid='4,5'>2</div> <div class='myDiv' data-catid='1,5,7'>3</div> <div class='myDiv' data-catid='8,9'>4</div> <div class='myDiv' data-catid='2,3,4'>5</div>