javascript - 如何在没有for循环的情况下引用数组的多个索引值？

如何在不迭代所有索引值的情况下指定数组的多个索引值？

我有一个数组：var boxArray = $(’.box’).toArray();。我的类box有9个元素，因此此数组由索引值[0, 1, 2, 3, 4, 5, 6, 7, 8]组成。

如果boxArray，[0]和[4]的[8]索引值都被赋予了clicked类，则我希望发生一些事情。我知道我可以使用for循环遍历整个数组，而且我知道我只能引用一个索引值（boxArray[0]），但是如何一次表示多个乱序索引值呢？

$(boxArray[0, 4, 8])不起作用-仅可识别最后一个索引值。 $(boxArray[0][4][8])不起作用

使用JavaScript和jQuery一次引用它们的唯一方法是吗？理想情况下，我希望能够执行以下操作：

if ($(boxArray[0, 4, 8]).hasClass(‘clicked’)) {
  // do something;
}

代替

if ($(boxArray[0]).hasClass('clicked') &&
    $(boxArray[4]).hasClass('clicked') &&
    $(boxArray[8]).hasClass('clicked')
) {
  // do something
}

最佳答案

您可以使用Array.prototype.every()：


  every（）方法测试数组中的所有元素是否通过提供的函数实现的测试。


片段：

var boxArray = $('.box').toArray();

var result = [1, 2, 4].every(function(element, index, array) {
    return boxArray[element].classList.contains('clicked');
});
console.log(result);

result = [0, 2, 4].every(function(element, index, array) {
    return boxArray[element].classList.contains('clicked');
});
console.log(result);

//

if ([0, 2, 4].every( (ele) => {return $(ele).has('.clicked');})) {
    console.log('test passed');
} else {
    console.log('test not passed');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button class="box clicked">box</button>
<button class="box">box</button>
<button class="box clicked">box</button>
<button class="box">box</button>
<button class="box clicked">box</button>
<button class="box">box</button>
<button class="box">box</button>
<button class="box">box</button>