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()返回元素原型而不是它的实例.简单的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");
    });
});