Using this inside loop : <p>I'm trying to use <code>this</code> inside loop, without jQuery. For some reason, it doesn't work. Why?</p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;a href="https://google.foo"&gt;Google&lt;/a&gt;

&lt;script&gt;
    /*
    // Plain JS - Works
    function doSomething() {
        var links = document.querySelectorAll('a');
        for (var i = 0; i &lt; links.length; i++) {
            links[i].href = links[i].href.replace('foo', 'bar');
        }
    }

    // jQuery - Works
    function doSomething() {
        $('a').each(function() {
            $(this).attr('href', $(this).attr('href').replace('foo', 'bar'));
        });
    }
    */

    // Plain JS - Doesn't work
    function doSomething() {
        var links = document.querySelectorAll('a');
        for (var i = 0; i &lt; links.length; i++) {
            this[i].setAttribute('href', this[i].getAttribute('href').replace('foo', 'bar'));
        }
    }

    doSomething();
&lt;/script&gt;
</code></pre>
