jquery - 如何添加兄弟内联

Question

$("#sibling").prepend("#sibling2")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sibling">First sibling</div>
<div>Another component</div>
<div id="sibling2">Second sibling</div>

我尝试通过前置将第一个同级添加到第二个同级。

虽然它增加了，但在第二个兄弟之上。我想将第一个兄弟添加到第二个兄弟旁边。

Answer 1

您有两种方法可以实现此目的，在第一种情况下您可以使用 insertBefore()方法，如果您希望它们内联在一起，只需应用 inline-block 样式:

$("#sibling").insertBefore("#sibling2")

div{
  border: 1px solid black;
}
#sibling, #sibling2{
  display: inline-block;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sibling">First sibling</div>
<div>Another component</div>
<div id="sibling2">Second sibling</div>

在第二种情况下，您可以使用 prepend()将 #sibling 移动到 #sibling2 开头的方法，请查看示例:

$('#sibling2').prepend($('#sibling'));

div{
  border: 1px solid black;
}
#sibling, #sibling2{
  display: inline-block;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sibling">First sibling</div>
<div>Another component</div>
<div id="sibling2">Second sibling</div>