如何在同一父项中的另一个元素中附加不同父项中的重复元素

Question

我尝试使用 JQuery 删除不同父元素中的重复元素并将它们附加到同一父元素中的另一个元素，但它无法正常工作

这里是 HTML 代码：

<div class='outer'>
  <div class='inner'>
    <h1> Text 1 </h1>
  </div>
  <span> data 1 </span>
</div>
<div class='outer'>
  <div class='inner'>
    <h1> Text 2 </h1>
  </div>
  <span> data 2 </span>
</div>

这里是JQuery使用的代码

$('span').each(function(){
  $(this).appendTo('.inner');
});

结果在JSFIDDLE

我需要这样的结果：

<div class="outer">
  <div class="inner">
    <h1> Text 1 </h1>
    <span> data 1 </span>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <h1> Text 1 </h1>
    <span> data 1 </span>
  </div>
</div>

Answer 1

通过使用盲人 $('.inner') select 或者，您 select 正在 div 内。您应该只使用 siblings() 到 select 最接近所用元素的内部 div。

您的代码应该是：

$('span').each(function(){
    $(this).appendTo($(this).siblings('.inner'));
});

JSFiddle Example

如果元素及其目标目的地实际上不是兄弟姐妹，则替代方法是：

$('span').each(function(){
    $(this).appendTo($(this).closest('.outer').find('.inner'));
});

JSFiddle Example

如何在同一父项中的另一个元素中附加不同父项中的重复元素

How to append repeated element inside different parents in another element in the same parents

each

jquery

append