javascript - 移动元素后如何更新包含元素列表的jQuery对象

Question

有一个元素列表，让我们说一些图像：

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

我选择它们并将结果存储在一个变量中：

var elements = $('img');

现在我想把最后一张图片放到第一个位置。它像这样工作正常：

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

之后，对象elements自然仍然按照之前的顺序保存值。我可以通过在班次后再次查询来更新它：

elements = $('img');

但是当我已经将所有元素放在一起时，运行另一个查询似乎效率低下。此外，因为它不是一个数组，所以这不起作用：

elements.unshift(elements.pop());

在这种情况下更新对象列表的最佳方法是什么？

Answer 1

假装！

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

演示

---

警告：我怀疑这比重新执行查询更快。

Answer 2

这里有两件事。

您在 DOM 中有一组元素，以及一个保存对这些元素的引用的 DOM 片段的变量。

jQueryfirst()和last()函数正在移动 DOM 中的元素，但它们对变量一无所知。

从代码简单的角度来看，您建议的代码是最易读的，除非您经常调用它，否则应该没问题。

elements = $('img');

否则，将变量转换为数组：

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

Answer 3

<div class="container">
 <img src="" alt="">
 <img src="" alt="">
 <img src="" alt="">
</div>

---

$('.container img:last-child').prependTo('.container'); //would work

$('img:last', elements).prependTo(elements); 
// i think this will also work if you need to cache it