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>

Answer 2

我想在第二个兄弟姐妹旁边添加第一个兄弟姐妹。

根据以下代码段，为所需的inline-block提供div显示CSS。

＆＃13;

$(function() {
  $('#sibling2').prepend($('#sibling'));
});

＆＃13;

div.siblings {
  display: inline-block;
}

＆＃13;

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

＆＃13;

在这里，我为两个div分配了类sibling并为其标记了CSS。

Answer 3

jquery append()方法会帮助你

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

你想成为同一行中的元素，只需将div的css属性设置为display: inline-block;

#sibling2, #sibling {
    display: inline-block;
}

如何添加兄弟内联

3 个答案: