使用 jQuery 将类添加到 DOM 对象数组的正确方法是什么？

Question

我尝试了两种迭代技术，但都产生了相同的错误：

addClass 不是函数

第一个使用for的例子：

function game(){
    var cards = $('.card');

    function initialize(){
        for(var x = 0; x < cards.length; x++) {    
            cards[x].addClass('wtf');    
        }
    };
};

第二次尝试使用每个：

function game(){
    var cards = $('.card');

    function initialize(){
        //Add random key values to pairs of cards
        $.each( cards ,function(i, ele) {    
            ele[i].addClass('wtf');
        });
    };
};

操作这些类型的数组的正确方法是什么？

Answer 1

您的代码示例不起作用，因为您尝试在 DOMElement 而不是 jQuery 对象上调用 jQuery 方法 addClass。

如果多个元素与 jQuery 对象中的选择器匹配，addClass() 方法将在内部为您执行循环，因此您只需进行一行调用：

function game(){
    var $cards = $('.card');

    function initialize() {
        $cards.addClass('wtf');
    };
};

例如，我如何能够选择第 5 张卡片并仅将课程添加到该卡片？

为此，您可以使用eq() 方法：

$cards.eq(4).addClass('wtf');

请注意，索引是从零开始的，因此第 5 个元素是索引 4。

Answer 2

cards[x] 是一个 DOM 元素，使用 $(cards[x]) jQuery 对象，如下所示。

function game() {
    var cards = $('.card');

    function initialize() {
        for (var x = 0; x < cards.length; x++) {
            //change following line. 
            $(cards[x]).addClass('wtf');
        }
    };
};

您不需要遍历所有元素。你不能像下面这样只使用cards .addClass('wtf')。

function game() {
    var cards = $('.card');

    function initialize() { 
        cards.addClass('wtf');
    };
};

如果您想选择特定卡，请使用 eq() 方法，如下所示。

cards.eq(4).addClass('wtf');   //eq(4) will select 5th card