Anyway to get an indexed item from $(".box")

Suppose I get a list of items like $(".box"). Is it possible to get an indexed jQuery object

like

var $boxes = $(".box"),
    $box2 = $boxes[1]

currently I do something like

var $boxes = $(".box");
$boxes.each(function(i, box) {
    var $box = $(box); // <-- is 开发者_如何学Gothis a good idea?
    // do something with $box
});

I wonder tho if the line var $box = $(box) is such a good idea? I am actually running that in a setInterval()

like

var $boxes = $(".box");
setInterval(function() {
    $boxes.each(function(i, box) {
        var $box = $(box); // <-- is this a good idea?
        // do something with $box
    });
}, 1000);

I wonder if its bad for performance since I am initializing a variable for each item in $boxes per 1s in this example. If I can access the element directly from the jQuery "array" or whatever $boxes is, it maybe better?

---

It's not entirely clear what your question is, but jQuery objects are already array-like, you can use the [] operators on them. What you get back is the raw DOM object at that index, so:

var $boxes = $(".box"),
    box2 = $boxes[1],   // `box2` is a raw DOM object
    $box2 = $(box2);    // `$box2` is a jQuery wrapper around the second box

Regarding this code:

var $boxes = $(".box");
setInterval(function() {
    $boxes.each(function(i, box) {
        var $box = $(box); // <-- is this a good idea?
        // do something with $box
    });
}, 1000);

It's fine to do that provided you really need to do it (e.g., if you really need a jQuery wrapper around that specific entry). It is making the browser do work each time the interval timer fires (because $() isn't free, though it's not expensive either), so if the list is short, you could trade that CPU time for memory use by pre-creating the jQuery wrappers on the elements:

var $wrapped = [];
$(".box").each(function() {
    $wrapped.push($(this));
});
setInterval(function() {
    $.each($wrapped, function(i, $box) {
        // do something with $box
    });
}, 1000);

---

You can iterate though the jQuery elements as per your example, nothing wrong with that. Creating a local variable for each element var $box = $(box); is a good idea.

You can also access the elements of the jQuery object with the eq method, e.g:

var $boxes = $(".box"),
$box2 = $boxes.eq(1);

That way you don't need to pass the element through the $ constructor.

---

If you want a faster and more efficient way of looping through the elements while also having a jQuery wrapper for each one, check out Ben Alman's "each2" plugin:

http://benalman.com/projects/jquery-misc-plugins/#each2

Then you could replace this code:

$boxes.each(function(i, box) {
    var $box = $(box);
    // do something with $box
});

With this:

$boxes.each2(function(i, $box) {
    // do something with $box
});

---

On a side-note,

var $boxes = $(".box");
setInterval(function() {
    $boxes.each(function(i, box) {
        var $box = $(box);
        // do something with $box
    });
}, 1000);

is equivalent to

var $boxes = $(".box");
setInterval(function() {
    $boxes.each(function() {
        var $box = $(this);
        // do something with $box
    });
}, 1000);

---

'i' in the callback function of each is the index. But I wouldn't recommend it. Simply call 'this' inside the each function for the current element.

var $box = this;

---

If you only need i.e. box 3:

$('.box:eq(3)').doStuff();