使用jQuery获取并将元素添加到末尾

Question

我有一个带有类.carousel-inner的div父元素。在这个父div中，有一些子元素。我想获取它的第二个（子）元素，并将该元素附加到最后。我可以像这样获取和附加第二个元素。

var a = $(".carousel-inner").children()[1];
$(".carousel-inner").append(a);

现在当我添加这个元素时，它会从第二个位置删除此元素并将其追加到最后。我想要保持这个元素仍然在第二个位置。我该怎么做？

- Umair Jameel

---

使用我的下面的答案中的clone()。如果有帮助，请告诉我。 - Mihai T

Answer 1

在查找元素后使用 clone() 方法，然后创建另一个变量。

var a = $(".carousel-inner").children()[1],
    b = $(a).clone();
$(".carousel-inner").append(b);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
    <div class="child">
    a
    </div>
      <div class="child">
    this clones
    </div>
      <div class="child">
    c
    </div>
</div>

或者在附加之前克隆元素，如下所示：

var a = $(".carousel-inner").children()[1]
$(a).clone().appendTo('.carousel-inner');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
    <div class="child">
    a
    </div>
      <div class="child">
    this clones
    </div>
      <div class="child">
    c
    </div>
</div>

- Mihai T

---

很高兴能够帮助。:D - Mihai T

你能告诉我如何在开头添加吗？ - Umair Jameel

@UmairJameel 使用 prepend 或 prependTo 替代 append 或 appendTo。 - Mihai T

Answer 2

使用.clone()。

$(a).clone().appendTo('.carousel-inner');

- RobertMulders

---

它报错说克隆不是一个函数。 - Umair Jameel

Answer 3

使用clone()函数;

var a = $(".test").children()[1];
a = $(a).clone();
$(".carousel-inner").append(a);

- Piotr Białek

---

它正在出现一个错误，即克隆不是一个函数。 - Umair Jameel

Answer 4

克隆是实现你想要的方式：

var a = $(".carousel-inner").children().eq(1);
a.clone().appendTo('.carousel-inner');

您收到错误是因为$(".carousel-inner").children()[1]获取的是DOM对象，而$(".carousel-inner").children().eq(1)获取的是jQuery对象，并且clone只在jQuery对象上定义。

- Quentin Roger

Answer 5

使用如下的克隆函数： $("p").clone().appendTo("body");

- madankundu

Answer 6

你也可以这样做。

var a = $(".carousel-inner").children().eq(1).prop('outerHTML');
$(".carousel-inner").append(a);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class"first-child">First</div>
 <div class"second-child">Second</div>
  <div class"third-child">Third</div>
  <div class"fourth-child">Fourth</div>
</div>

- Jayababu