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

时间:2017-02-27 13:37:03

标签: javascript jquery arrays for-loop

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

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

如果boxArray[0][4]的{​​{1}}索引值都被赋予了[8]类,我想要发生一些事情。我知道我可以使用clicked循环遍历整个数组,我知道我只能引用一个索引值(for),但我如何表示多个无序索引值马上?

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

这是在JavaScript和jQuery中一次一个地引用它们的唯一方法吗?理想情况下,我希望能够做到这样的事情:

$(boxArray[0][4][8])

而不是

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

5 个答案:

答案 0 :(得分:1)

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

  

every()方法测试数组中的所有元素是否都通过了由提供的函数实现的测试。

摘录:

~/.ivy2
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');
}

答案 1 :(得分:1)

您可以创建一个为您进行检查的函数(使用arguments对象)。像这样:

function check(arr) {
    for(var i = 1; i < arguments.length; i++) {          // for each index (arguments after the first which is the array)
        if( ! $(arr[arguments[i]]).hasClass('clicked') ) // if one of them doesn't have the class 'clicked' then return false
            return false;
    }
    return true;                                         // if all have the class clicked then return true
}

然后你可以这样称呼它:

if(check(boxArray, 0, 4, 8)) {
    // boxArray[0], boxArray[4] and boxArray[8] have the class clicked
}
// or
if(check(boxArray, 0, 4, 8, 3, 1, 7, 11)) {
    // all the .box elements at indexes 0, 4, 8, 3, 1, 7 and 11 have the class 'clicked'
}
// ...

注意:如果仅将数组作为参数传递(check(boxArray)),则返回的值将为true。如果您想在这种情况下返回false,那么只需将此行作为函数check的第一行:

if(arguments.length <= 1) return false;

答案 2 :(得分:1)

您可以使用map()方法或filter()方法或every方法(例如@ gaetanoM的答案):

使用map

var boxArray = []; 

$('.box').toArray().map((x, y, z) => {
  if (y === 0 || y === 4 || y === 8) boxArray.push($(x));
});

boxArray.forEach(box => {
  if (box.hasClass('clicked')) {
    // do something...
  }
});

使用filter

var boxArray = $('.box').toArray().filter((x, y, z) => {
  if (y === 0 || y === 4 || y === 8) return $(x);
});

boxArray.forEach(box => {
  if (box.hasClass('clicked')) {
    // do something...
  }
});

答案 3 :(得分:1)

你可以使用jquery.fn.filter(function),然后你可以检查过滤器(..)。length == [2,8] .length

&#13;
&#13;
$('button').click(function(){
  var selectors=[2,8];
  
  $('.box').filter(function(index,element){
    return selectors.indexOf(index)!=-1&&$(element).has('.checked');
  }).addClass('active');
});
&#13;
.box{
 float:left;
 border:1px solid #000;
 width:80px;
 height:50px;
 margin:5px;
}
.active{
 color:red;
}
button{
clear:both;
display:block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>filter [2,8] without 4</button>
<div class='box'>.box</div>
<div class='box'>.box</div>
<div class='box checked'>.box .checked</div>
<div class='box'>.box</div>
<div class='box checked'>.box .checked</div>
<div class='box'>.box</div>
<div class='box'>.box</div>
<div class='box'>.box</div>
<div class='box checked'>.box .checked</div>
<div class='box'>.box</div>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

最简单的方法是

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