jQuery：如何将子元素移入其父元素的相邻兄弟Uncle元素？

需求 #

每个.parent元素下的.child4子元素，需移入该.parent的相邻兄弟元素.uncle内部，保证结构一一对应，避免所有.child4被移入同一个.uncle。

初始HTML结构 #

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

现有代码问题 #

当前代码仅将.child4移动到.parent之后，并未放入目标.uncle内部：

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

修改后的解决方案代码 #

jQuery(function(){
    // 遍历每个.parent元素，确保一一对应处理
    $('.parent').each(function(){
        // 获取当前.parent下的.child4
        var $child4 = $(this).find('.child4');
        // 获取当前.parent相邻的下一个.uncle元素
        var $uncle = $(this).next('.uncle');
        // 将.child4移入对应的.uncle内部
        $uncle.append($child4);
    });
});

代码说明 #

• 使用.each()遍历每个.parent，保证每个父元素的.child4都能找到对应的.uncle
• .find('.child4')精准定位当前父元素下的目标子元素
• .next('.uncle')获取当前父元素的相邻兄弟.uncle，确保结构对应
• .append()方法将.child4移入.uncle内部，而非放在其外面

执行后的期望结果 #

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

内容的提问来源于stack exchange，提问作者Benedict Harris