移动 DOM 元素，同时仍将其保留在自己的容器中

Question

我想在 DOM 中移动一个 DOM 元素，但同时仍将其保留在自己的容器中。

采取以下HTML：

<div class="contain">
  <div class="bit">A</div>
  <div class="bit">B</div>
  <div class="bit">C</div>
  <div class="bit">D</div>
  <div class="bit">E</div>
</div>

我想将包含 A 的 .bit 放到此列表的末尾，就在 E 下面，同时仍将其保留在 div .contain.

我试过以下方法：

$('.contain').find('bit').first().appendTo('.contain');

和：

$('.contain').find('bit').first().insertAfter($('.contain').find('bit').last());

而且它们都不起作用。

我几乎无法控制 HTML。例如，我不能给每个 .bit 一个唯一的 ID。

谁能解释一下我做错了什么？

Answer 1

只需附加它到同一个容器，A移动到列表末尾。

您的两次尝试都成功了 - 您错过了 find('.bit') 部分的 .。

参见下面的演示：

$('.contain').append($('.contain .bit:first-child'));

// the below works too
// $('.contain').find('.bit').first().appendTo('.contain');

// and even this works
// $('.contain').find('.bit').first().insertAfter($('.contain').find('.bit').last());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="contain">
  <div class="bit">A</div>
  <div class="bit">B</div>
  <div class="bit">C</div>
  <div class="bit">D</div>
  <div class="bit">E</div>
</div>

Answer 2

您需要使用 class 选择器 .，您已将其用于 .contain

$('.contain').find('.bit').first().appendTo('.contain');

工作片段：

$('.contain').find('.bit').first().appendTo('.contain');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
  <div class="bit">A</div>
  <div class="bit">B</div>
  <div class="bit">C</div>
  <div class="bit">D</div>
  <div class="bit">E</div>
</div>

移动 DOM 元素，同时仍将其保留在自己的容器中

Move a DOM element whilst still keeping it in its own container

html

javascript

jquery

jquery-selectors