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')选择器，即可选择两个内部div。您应该使用siblings()仅选择最接近正在使用的元素的内部div。

您的代码应为：

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

JSFiddle Example

如果元素及其目标目标实际上不是兄弟姐妹，则可以选择：

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

JSFiddle Example

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

1 个答案: