Question

我在元素A上有一个类的数组，我想将这些类与数组B进行匹配。classList数组将总是比filters长不同的数量。因此，我认为这不是this question的副本。

我想执行以下操作：

if( all elements of array B are present in array A ) {
    Add this element to elsIn;
} else {
    Add this element to elsOut;
}

我尝试遵循this SO Question中的答案，但这对我不太有用。

我知道jQuery提供了一个$.inArray函数，但这意味着我需要多个循环才能实现结果，并且效率低下。

我还发现this question and answer，但是JS代码仅与数组中的一个元素匹配，而不与所有元素匹配。

var elsOut = [],
  elsIn = [],
  filters = [],
  classList;
$(document).on('click', '[data-filter]', function(e) {

  if ($(this).hasClass('is-active')) {
    filters.pop($(this).data('filter'));
  } else {
    filters.push($(this).data('filter'));
  }

  $('.trainer').each(function() {
    classList = this.className.split(' ');
    if (classList.contains(filters)) { // if all elements in "filters" match an element in "classList"
      elsIn.push(this);
    } else {
      elsOut.push(this);
    }
  });


  $(this).toggleClass('is-active');

  $(elsOut).fadeOut();
  $(elsIn).fadeIn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您可以使用Set并设置尺寸检查。例如：

const arrA = [1, 2, 3, 4, 5],
      arrB = [2, 3],
      set  = new Set([...arrA, ...arrB]);

if (set.size === arrA.length) {
  // all elements of array B are present in array A
} else { 

}

Answer 2

我从this question的答案中汲取了一些帮助，并从this question得到了更多启发，我想到了以下解决方案。感谢@HereticMonkey为我指出正确的方向！

function contains(haystack, needles) {
  haystack.sort();
  needles.sort();
  var i, j;
  for (i = 0, j = 0; i < haystack.length && j < needles.length;) {
    if (haystack[i] < needles[j]) {
      ++i;
    } else if (haystack[i] == needles[j]) {
      ++i;
      ++j;
    } else {
      // needles[j] not in haystack
      return false;
    }
  }
  // make sure there are no elements left in needles
  return j == needles.length;
}

function removeA(arr) {
  var what, a = arguments,
    L = a.length,
    ax;
  while (L > 1 && arr.length) {
    what = a[--L];
    while ((ax = arr.indexOf(what)) !== -1) {
      arr.splice(ax, 1);
    }
  }
  return arr;
}

var filters = [];

$(document).on('click', '[data-filter]', function(e) {
  e.preventDefault();

  var elsOut = [],
    elsIn = [],
    classList;

  if ($(this).hasClass('is-active')) {
    removeA(filters, $(this).data('filter'));
  } else {
    filters.push($(this).data('filter'));
  }

  $('.trainer').each(function() {
    classList = this.className.split(' ');
    if (contains(classList, filters)) { // if all elements in "filters" match an element in "classList"
      elsIn.push(this);
    } else {
      elsOut.push(this);
    }
  });

  $(this).toggleClass('is-active');

  $(elsOut).fadeOut();
  $(elsIn).fadeIn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

匹配两个数组的元素

2 个答案: