Retrieving an element by array index in jQuery vs the each() function
<p>I was writing a "pluginable" function when I noticed the following behavior (tested in FF 3.5.9 with Firebug 1.5.3).</p>

<pre><code>$.fn.computerMove = function () {
    var board = $(this);
    var emptySquares = board.find('div.clickable');
    var randPosition = Math.floor(Math.random() * emptySquares.length);


    emptySquares.each(function (index) {
        if (index === randPosition) {
            // logs a jQuery object
            console.log($(this));
        }
    });

    target = emptySquares[randPosition];
    // logs a non-jQuery object
    console.log(target);
    // throws error: attr() not a function for target
    board.placeMark({'position' : target.attr('id')});
}
</code></pre>

<p>I noticed the problem when the script threw an error at <code>target.attr('id')</code> (<code>attr</code> not a function). When I checked the log, I noticed that the output (in Firebug) for target was:</p>

<pre><code>&lt;div style="width: 97px; height: 97px;" class="square clickable" id="8"&gt;&lt;/div&gt;
</code></pre>

<p>If I output <code>$(target)</code>, or <code>$(this)</code> from the <code>each()</code> function, I get a nice jQuery object:</p>

<pre><code>[ div#8.square ]
</code></pre>

<p>Now here comes my question: why does this happen, considering that <code>find()</code> seems to return an array of jQuery objects? Why do I have to do <code>$()</code> to <code>target</code> all over again?</p>

<pre><code>[div#0.square, div#1.square, div#2.square, div#3.square, div#4.square, div#5.square, div#6.square, div#7.square, div#8.square]
</code></pre>

<p>Just a curiosity :).</p>
