Question

是否可以使用数组选择器选择多个元素？

如果是这样，最好的方法是什么？在我的项目中，我只需要使用数组选择器。

这是我的示例代码：

<ul>
    <li>1<li>
    <li>2<li>
    <li>3<li>
    <li>4<li>
    <li>5<li>
</ul>
<a href="#">select</a>

$('a').click(function(){
    var element = $('ul').find('li')[0]; // Instead is it possible $('ul').find('li')[0,3,4]? I know we can select finding each alone. But is there any shortcut?
    $(element).css({border:'1px solid red'});
})

Answer 1

这会产生预期的结果。只需按index()进行过滤，然后使用inArray()。

var arr = [0, 3, 5];
$('ul li').each(function() {
    if ($.inArray($(this).index(), arr) < 0)
        return;
    // Code here!
    $(this).css('border', '1px solid red');
});

基本上所有的<li>都通过each（）运行，然后我循环检查给定的.index（）是否在给定的数组中。如果它们不存在（$ .inArray（）== -1）那么我会返回;跳过执行。

Answer 2

这是一种性感的方法：按照另一个答案的建议，为JavaScript Array对象添加自定义方法。

Array.prototype.filter = function(indexes) {
    var array = new Array();
    for(var i=0; i<indexes.length; i++) {
        array.push(this[indexes[i]]);
    }
    return array;
};

要打电话：

$('ul').find('li').filter([0,3,4]).anything();

您希望自定义通用快捷方式：）

Answer 3

一种选择是使用filter;

var indexArray = [1,3,4];
$('ul li').filter(function(index) {
    return jQuery.inArray($(this).index(), indexArray) > -1;
});

还使用$.inArray和index()。查看demo。

Answer 4

也许这会有效（但性能不太好）：

$('ul li:nth-child(0),ul li:nth-child(2)');

或者这个：

$('ul li:eq(0),ul li:eq(2)');

Answer 5

您也可以使用forEach数组

arr = "013".split("");
arr.forEach(function(a,b){
    var element = $('li')[a]; 
    console.log(element);
    $(element).css({border:'1px solid red'});
});

这是Fiddle

Answer 6

循环

$('a').click(function() {
    var element = $('ul').children('li');
    var count = 0;
    for (x in element) {
        count++;
        if ((count == 0) || (count == 3) || (count == 5))
            x.css({ border: '1px solid red' });
    }
});

jQuery：有没有办法使用数组选择器选择多个元素？

6 个答案: