jQuery: how do I move a child element into its 'uncle' element? ie the sibling of its parent?

Question

I want to move a div into its uncle div, or sibling of its parent, and only one step down.

So I want to move class '.child4' into '.uncle', one step down.

<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>

however I want it to be relative, there are multiple parent/child divs. if I do just a simple appendTo then all go in one div instead of relative.

I am half the way there, I managed to find code to move the child to move up one level. Now I just need it to move inside the div one sibling down after that.

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

it ends up with this:

<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>

but what I want, is this:

<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>

help appreciated

Ben

Answer 1

You can use .nextAll(".uncle:first").append($(this)) inside each loop this will target only the next uncle div and append your child4 div there.

Demo Code:

$(".child4").each(function() {
  $(this).closest(".parent")
    .nextAll(".uncle:first").append($(this)) //can use prepend if needed first child.
})

.parent {
  border: 1px solid red;
}

.uncle {
  border: 1px solid yellow;
}

<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>
<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 class="parent">
  <div class="child1">apples3</div>
  <div class="child2">oranges3</div>
  <div class="child3">pears3</div>
  <div class="child4">banana3</div>
  <div class="child5">pineappl3e</div>
  <div class="child6">kiwi3</div>
  <div class="child7">passionfruit3</div>
</div>
<div class="uncle">
</div>

Answer 2

Just use .detach() and .appendTo.

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

Example:

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