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

Answer 2

像这样包裹this：$(this)以您的描述方式使用它。

这是jQuery documentation：

中描述的预期行为

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

jQuery el.each（）返回HTMLAnchorElement而不是元素实例

2 个答案: