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

Answer 2

裹this像這樣：$(this)使用它，你如何描述。

這是如在jQuery documentation描述的預期行爲：

的。每個（）方法被設計成使DOM循環結構簡潔 和不易出錯。當它被調用時，它遍歷作爲jQuery對象一部分的DOM元素 。每次回調運行時，都是 通過當前循環迭代，從0開始。更重要的是， 回調在當前DOM元素的上下文中觸發，因此 這個關鍵字指的是元素。