jQuery：如何将子元素移动到它的“叔叔”元素中？即其父母的兄弟姐妹？

Question

我想将一个 div 移动到它的叔叔 div，或者它的父级的兄弟姐妹中，并且只向下移动一步。

所以我想将类“.child4”移到“.uncle”中。

<div class="parent" >
    <div class="child1" >apples</div>
    <div class="child2" >oranges</div>
    <div class="child3" >pears</div>
    <div class="child4" >banana</div>
    <div class="child5" >pineapple</div>
    <div class="child6" >kiwi</div>
    <div class="child7" >passionfruit</div>
</div>
<div class="uncle" >  </div>
<div class="parent" >
    <div class="child1" >apples2</div>
    <div class="child2" >oranges2</div>
    <div class="child3" >pears2</div>
    <div class="child4" >banana2</div>
    <div class="child5" >pineappl2e</div>
    <div class="child6" >kiwi2</div>
    <div class="child7" >passionfruit2</div>
</div>
<div class="uncle" >  </div>

但是我希望它是相对的，有多个父/子 div。 如果我只做一个简单的 appendTo 然后全部放在一个 div 而不是 relative.

我已经走到一半了，我设法找到了让孩子向上移动一级的代码。现在我只需要它在 div 里面移动一个兄弟姐妹。

jQuery(function(){ //Make sure it is inside DOM ready
     var $div = jQuery('div:has(".child4")');
     $div.after(function () {
          return jQuery(this).children(".child4");
    });
});

最后是这样的：

<div class="parent" >
    <div class="child1" >apples</div>
    <div class="child2" >oranges</div>
    <div class="child3" >pears</div>
    
    <div class="child5" >pineapple</div>
    <div class="child6" >kiwi</div>
    <div class="child7" >passionfruit</div>
</div>
<div class="child4" >banana</div>
<div class="uncle" >  </div>
<div class="parent" >
    <div class="child1" >apples2</div>
    <div class="child2" >oranges2</div>
    <div class="child3" >pears2</div>
    
    <div class="child5" >pineappl2e</div>
    <div class="child6" >kiwi2</div>
    <div class="child7" >passionfruit2</div>
</div>
<div class="child4" >banana2</div>
<div class="uncle" >  </div>

但我想要的是：

<div class="parent" >
    <div class="child1" >apples</div>
    <div class="child2" >oranges</div>
    <div class="child3" >pears</div>
    
    <div class="child5" >pineapple</div>
    <div class="child6" >kiwi</div>
    <div class="child7" >passionfruit</div>
</div>
<div class="uncle" >  
    <div class="child4" >banana</div>
</div>
<div class="parent" >
    <div class="child1" >apples2</div>
    <div class="child2" >oranges2</div>
    <div class="child3" >pears2</div>
    
    <div class="child5" >pineappl2e</div>
    <div class="child6" >kiwi2</div>
    <div class="child7" >passionfruit2</div>
</div>
<div class="uncle" >  
    <div class="child4" >banana2</div>
</div>

帮助赞赏

本

Answer 1

只需使用

.detach()

和

.appendTo

.

$(".child4").detach().appendTo(".uncle");

例子：

$(".child4").detach().appendTo(".uncle");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child1">apples</div>
  <div class="child2">oranges</div>
  <div class="child3">pears</div>
  <div class="child4">banana</div>
  <div class="child5">pineapple</div>
  <div class="child6">kiwi</div>
  <div class="child7">passionfruit</div>
</div>
<div class="uncle">

</div>