Question

I have the following HTML scheme:

<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>

And the following JavaScript part:

$(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
    });
});

I need to use the methods .removeAttr() and .attr(), but it does not work because .each() returns the elements prototype instead of its instance. Same problem on a simple for loop.

Answer 1

this refers to the DOM element. To use jQuery functionality on this element you need to wrap it in a jQuery object, ie: $(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");
    });
});