jQuery中.attr()方法调用失效：遍历DOM元素时的问题排查

核心原因很简单：你通过divs[i]取出的是原生DOM元素，不是jQuery对象，而.attr()是jQuery专属的方法，原生DOM元素根本没有这个方法，自然会调用失效。

关键区别说明： #

• jQuery对象是一个包裹了原生DOM元素的类数组结构，自带一系列jQuery特有的便捷操作方法（比如.attr()、.addClass()）。
• 当你用索引[i]或者.get(i)从jQuery对象里取值时，拿到的是数组里的原生DOM节点，它只能调用原生DOM的方法（比如.setAttribute()），不能直接用jQuery的方法。

解决办法 #

有几种方式可以修复这个问题：

1. 用jQuery的.eq()方法获取对应索引的jQuery对象

$(function(){
    let divs = $("div");
    for (let i = 0; i < divs.length; i++) {
        const div = divs.eq(i);
        
        div.attr("class", "red");
    }
});

2. 把原生DOM元素重新包装成jQuery对象

$(function(){
    let divs = $("div");
    for (let i = 0; i < divs.length; i++) {
        const div = $(divs[i]);
        
        div.attr("class", "red");
    }
});

3. 更简洁的jQuery遍历方式（推荐）
   其实jQuery本身提供了更方便的遍历方法.each()，不用自己写for循环：

$(function(){
    $("div").each(function() {
        $(this).attr("class", "red");
    });
});

4. 直接批量操作（最简洁）
   如果是给所有div统一设置class，甚至不用遍历，直接调用jQuery方法就能批量处理：

$(function(){
    $("div").attr("class", "red");
});

内容的提问来源于stack exchange，提问作者KolyaKovt