使用jQuery来；更改“；HTML？

我正在尝试更改一组img标签在我的页面上显示的顺序。使用insertAfter（）或after（）可以很好地工作，它可以移动页面上的img，但不会在实际的HTML中更改它们。因此，当我将第一个img移动到堆栈底部时，eq（0）（应该选择顶部的img）仍然选择刚刚“移动”到底部的img，而不是新的第一个img。有没有一种方法可以改变IMG的HTML位置，这样我就可以在IMG上重复使用相同的jQuery代码

编辑：

HTML

---

第二行将第一个img置于最后一个img之后。但是，下次它尝试使用幻灯片.eq（0）瞄准第一个img时，它瞄准的是我移到底部的img，而不是应该在顶部的img。

由于缺少代码，这里有一个暗中拍摄：

您正在选择图像，例如使用

$（“img”）

。这将为您提供如下对象：

• [0]

  第一幅图像

• [1]

  第二幅图像

• [2]

  第三幅图像

然后移动要位于末尾的第一个图像。你的结果是：

• [1]

  第二幅图像

• [2]

  第三幅图像

• [0]

  第一幅图像

请注意，索引如何继续引用与以前相同的图像！仅仅因为您更改了元素的顺序，并不意味着它们也在jQuery对象中进行了更新——这将是跟踪的一种方式

因此，现在您访问

.eq（0）

。第一个图像。不管它现在是页面上的第三个图像，它仍然是jQuery对象中的第一个图像

---

您需要重新生成

$（“img”）

对象以获得更新的索引。

使用

insertAfter

或

after

将移动DOM中的元素

您的问题是jQuery对象（不同于，例如，

GetElementsByCassName

）并没有维护一个活动的HTML集合，它只是有一个元素数组，该数组匹配它在构建时使用的任何元素

---

您需要创建一个新的jQuery对象，或者跟踪数组中已经处理过的元素，或者使用jQuery以外的其他东西来维护活动的HTML集合。

jQuery集合不是活动的，因此在DOM更改时不会更新它们

我建议使用原生vanilla js live collections，它将得到更新

比较以下各项：

var$el=$（document.body），
$children=$el.children（），//这不是一个活动集合
$first=$children.eq（0）；
$el.append（$first）；
//“$children”尚未更新
$children[0]==$first[0]；//`真的`

var el=document.body，
children=el.children，//这是一个实时收集
第一个=儿童[0]；
el.儿童（第一）；
//“儿童”一词已更新
子项[0]==第一个；//`假的`

请提供您正在使用的HMTL和JavaScript代码。最好你能拿出尽可能小的例子来说明你的问题。如果没有实际的代码，仅仅告诉我们正在发生的事情是不太有用的。太慢了：p但是很高兴知道你在这个问题上和我有相同的想法。好的，解释是有意义的，谢谢：）你建议如何更新索引？我可以重述这些变量吗？我现在已经添加了代码。我首先用var slide=$（'.slide'）的代码声明了所有img；在移动IMG后，我是否应该说slide=$（“slide”）；更新索引？

<div id='slideshow'>
    <img class='slide' />
    <img class='slide' />
    <img class='slide' />
    <img class='slide' />
</div>

var slide = $('.slide');
slide.eq(0).insertAfter(slide.eq(slide.length - 1));