对象字面量模式中使用.each()时的this指向问题求助

核心问题 #

你的代码存在几个关键错误：

• document.querySelectorAll(".mydiv")返回的是原生NodeList对象，它没有jQuery的.each()方法，直接调用会触发报错。
• 即便拿到jQuery对象，.each()回调里的this默认指向当前遍历的DOM元素，而原生DOM元素并没有.css()方法（这是jQuery对象专属方法）。

方案一：原生JavaScript实现 #

完全用原生API改写，无需依赖jQuery：

var myObject = {
    el: {
        divs: document.querySelectorAll(".mydiv")
    },
    init: function() {
        this.allDivs();
    },
    allDivs: function() {
        // 用原生forEach遍历NodeList
        this.el.divs.forEach(this.backGround);
    },
    backGround: function(div) {
        // 原生DOM元素通过style属性设置样式
        div.style.background = "red";
    }
};

myObject.init();

方案二：jQuery适配写法 #

如果习惯使用jQuery API，需要调整元素获取方式与this指向：

var myObject = {
    el: {
        // 直接用jQuery选择器获取jQuery对象
        divs: $(".mydiv")
    },
    init: function() {
        this.allDivs();
    },
    allDivs: function() {
        // 直接在each回调里操作当前DOM元素
        this.el.divs.each(function() {
            // 把原生DOM元素包装成jQuery对象后调用css方法
            $(this).css("background", "red");
        });
    }
};

myObject.init();

补充说明 #

• 原生JS方案中，forEach是NodeList的原生遍历方法，回调第一个参数即为当前DOM元素，直接操作其style属性即可完成样式设置。
• jQuery方案中，.each()回调里的this默认指向当前遍历的原生DOM元素，只需用$(this)包装成jQuery对象，就能调用.css()方法。

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