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>

我想将包含.bit的{{1}}放在此列表的末尾，就在A下方，同时仍将其保留在div E内。

我尝试了以下内容：

.contain

和

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

它们都不起作用。

我几乎无法控制HTML。例如，我无法为每个$('.contain').find('bit').first().insertAfter($('.contain').find('bit').last());提供自己唯一的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

您需要使用已用于.的类选择器.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元素，同时仍将其保留在自己的容器中

2 个答案: