Question

    $(function(){

        var els = [];

        var m = $("#container");
        m.attr({"style" : "width:50%;"});

        $(".grid").each(function(e){
            els.push(this);
        });

        var n = els[3];
        n.attr({"style" : "width:50%;"}) //error
    });

您好，我是DOM操作的新手。我想知道为什么上面的JQuery为 var m 返回[Object] [Object]，但为 var n 返回[Object] [HTMLDivElement]。

由于这种行为，我无法使用 n.attr（ args ）等语句。

TypeError: n.attr is not a function

最终，我想将每个 .grid 元素存储在一个数组中，然后迭代它们，按我的方式设置属性。

更确切地说，我有一个6x3网格的div元素，每次页面加载时，它们都会被赋予一个随机的动画持续时间，因为它们被设置为淡入和淡出视图的动画

为什么我不能使用 n.attr（）？

Answer 1

那是因为this循环中的.each()是实际的DOM元素，而不是jQuery对象。如果您希望数组中的项是jQuery对象，则需要自己将它们包装在一起：

els.push($(this));

或者，您可以在访问DOM元素时将其包装起来：

var n = $(els[3]);

来自jQuery .each()：

更重要的是，回调是在当前的上下文中触发的 DOM元素，因此关键字this引用元素。

和

要访问jQuery对象而不是常规DOM元素，请使用 $( this )

Answer 2

DOM元素不是jQuery对象。 n是DOM元素的数组，而不是具有DOM元素作为属性的jQuery对象。您可以使用DOM方法在没有jQuery的情况下获得相同的结果

onload = function() {

    var m = document.getElementById("container");

    m.style.width = "50%";

    var els = document.querySelectorAll(".grid");

    var n = els[3];

    n.style.width = "50%";

}

简单示例：通过迭代设置属性

2 个答案: