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

Question

我有以下 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() 返回元素原型(prototype)而不是其实例。简单的 for 循环也有同样的问题。

Answer 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");
    });
});