How to update a jQuery object containing a list of elements after moving an element

Question

There's a list of elements, let's say some images:

<img src="" alt="">
<img src="" alt="">
<img src="" alt="">

I select them and store the result in a variable:

var elements = $('img');

Now I want to bring the last image to the first position. It works fine like this:

elements.first().before(elements.last());

After that the object elements naturally still holds the values in the order they where before. I can update this by querying again after the shift:

elements = $('img');

But it seems inefficient to run another query when I already have all the elements together. Also, as it's not an array this won't work:

elements.unshift(elements.pop());

What's the best way to update the object list in such a case?

Answer 1

fake it!

[].unshift.call(elements, [].pop.call(elements))

Demo

---

Caveat: I doubt this is faster than re-executing the query.

Answer 2

There are two things going on here.

You have a set of elements in the DOM, and a variable holding a DOM fragment of references to those elements.

The jQuery first() and last() functions are moving the elements in the DOM, but they don't know anything about the variable.

From a code simplicity point of view, your suggested code is the most readable, and should be fine unless you are calling it a lot.

elements = $('img');

Otherwise, turn the variable into an array:

var elementsarray = [];
elements.each(function(i) { elementsarray[] = this; });