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

【问题标题】：Move a DOM element whilst still keeping it in its own container移动 DOM 元素，同时仍将其保留在自己的容器中
【发布时间】：2017-09-14 09:37:58
【问题描述】：

我想在 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。

谁能解释我做错了什么？

【问题讨论】：

你试过了吗：.find('.bit')
var c = document.querySelector(".contain"); c.appendChild(c.firstElementChild);
@freedomn-m 是对的。 find 函数可以接受类、id、标记名和 $() 可以接受的任何内容：选择器表达式。所以一个类必须由'。'定义。在它前面。

标签： javascript jquery html jquery-selectors

【解决方案1】：

只需追加它到 same 容器，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>

【讨论】：

【解决方案2】：

您需要使用已用于.contain 的类选择器.

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

工作sn-p：

$('.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>

【讨论】：