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];

我想要循环遍历，并隐藏那些在他们的中没有两个分类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';

});

- user818700

---

能看到你迄今为止尝试过的筛选方式会很酷... - evolutionxbox

Answer 1

使用filter()方法与javascriptArray#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 选项。

- Pranav C Balan

---

谢谢你的回答，然而当我运行它时出现了这个错误："Uncaught TypeError: $(...).data(...).split 不是一个函数"。 - user818700

@DeanGibson: 将 $('.myDiv') 改为 $('.myDiv[data-catid]') - Pranav C Balan

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>

- Mohammad