jQuery el.each() 返回 HTMLAnchorElement 而不是元素实例答案

【问题标题】：jQuery el.each() returns HTMLAnchorElement instead of elements instancejQuery el.each() 返回 HTMLAnchorElement 而不是元素实例
【发布时间】：2012-03-14 19:21:14
【问题描述】：

我有以下 HTML 方案：

<section id="vids">
    <ul>
        <li>
            <a data-reference="12345" href="http://www.youtube.com/watch?v=12345" rel="external" target="_blank">
                <span>Video 14</span>
            </a>
        </li>
        <!-- ... -->
    </ul>
</section>

以及以下 JavaScript 部分：

$(document).ready(function() {
    console.log($("#vids a")); // Returns element instance collection

    $("#vids a").each(function(i, el) {
        console.log(this); // Returns HTMLAnchorElement instead of the element itself
        console.log(el); // Same here
        console.log(i); // Returns index
    });
});

我需要使用 .removeAttr() 和 .attr() 方法，但它不起作用，因为 .each() 返回元素原型而不是其实例。一个简单的 for 循环也有同样的问题。

【问题讨论】：

标签： javascript jquery for-loop element each

【解决方案1】：

this 指的是 DOM 元素。要在此元素上使用 jQuery 功能，您需要将其包装在 jQuery 对象中，即：$(this)。

$(document).ready(function() {
    console.log($("#vids a")); // Returns element instance collection

    $("#vids a").each(function(i, el) {
        console.log($(this)); // Will return [Object object]
        console.log($(el)); // Same 

        var $el = $(this);
        $el.removeAttr("attribute").attr("foo", "bar");
    });
});

【讨论】：

【解决方案2】：

像这样包装this：$(this) 以按照您的描述使用它。

这是jQuery documentation 中描述的预期行为：

.each() 方法旨在使 DOM 循环结构简洁并且不易出错。当被调用时，它会遍历 DOM 元素它们是 jQuery 对象的一部分。每次回调运行时，它是通过当前循环迭代，从 0 开始。更重要的是，回调在当前 DOM 元素的上下文中触发，所以关键字 this 指代元素。

【讨论】：