我需要将图像从一个元素移动到另一个元素

我有这个html结构。我希望其他领域的项目与其他领域的项目一起。我需要将图像从一个元素移动到另一个元素

<div class="secondary-images"> 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group1"> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    </div> 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group2"> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    </div> 
</div>

我想要这个。

<div class="secondary-images"> 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group1"> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    <div class="field__item"></div> 
    </div> 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group2"> 

    </div> 
</div>

如何移动元素。我试过这个，但没有运气。

var $element = $('.secondary-images > .group2').detach(); 
$('.secondary-images > .group1').append($element);

来源

2017-02-16 Jonathan Dalgaard

你有**什么**结构？ –

为什么不只是附加在第二个div，然后从第一个div中删除？更新：由于您的结构如何，您将获得group1 div内的整个.group2 div，而不仅仅是内容。你可以迭代子集。 – LordNeo

复制[如何将元素移动到另一个元素？]（http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element） –

下面的代码应该很好地工作：

$('.secondary-images .group2').detach().appendTo($('.secondary-images .group1'));

简短。

来源

2017-02-16 19:52:06 m87

非常感谢你真的工作。 –

我会这样做的。很高兴你会帮忙。 –

你能再次帮助我吗？现在我有很多额外的东西不在我的旧版本中，你知道那是什么。谢谢 –

1.-错误：确保dom可用于操作。因此，这应能正常工作：

$(document).ready(function() { 
    var $element = $('.secondary-images > .group2').detach(); 
    $('.secondary-images > .group1').append($element); 
});

2：你想它的工作方式：由于版面，上面的代码会使整个group2格出现在group1 DIV中，嵌套它。我想你只想把它所以这里的内容片断：

$(document).ready(function() { 
 
    $('.secondary-images > .group2 > .field__item').each(function() { 
 
    $(this).detach(); 
 
    $('.secondary-images > .group1').append(this); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="secondary-images"> 
 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group1"> 
 
     <div class="field__item">a</div> 
 
     <div class="field__item">b</div> 
 
     <div class="field__item">c</div> 
 
     <div class="field__item">d</div> 
 
     <div class="field__item">e</div> 
 
     <div class="field__item">f</div> 
 
    </div> 
 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group2"> 
 
     <div class="field__item">g</div> 
 
     <div class="field__item">h</div> 
 
    </div> 
 
</div> 
 
<!-- REFERENCE 
 
<div class="secondary-images"> 
 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group1"> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
     <div class="field__item"></div> 
 
    </div> 
 
    <div data-quickedit-field-id="node/29/rd_page_secondary_image/da/full" class="group2"> 
 

 
    </div> 
 
</div> 
 
-->

这将分离并追加每field__item从第2组，并把它放在1组，在这之后，你可以做无论你喜欢什么样的group2，都可以将其删除，或者在稍后填写内容。

来源

2017-02-16 19:49:00 LordNeo

为什么他不能用$来启动一个变量？我们一直这样做，它有助于确定变量是否引用了一个jQuery对象。 – Chris

对不起，我的错误（错误的语言），那么唯一的错误是当调用函数时dom还没有准备好。 – LordNeo

你应该可以在一行中做到这一点。你可以放入一个函数或事件。

$('.secondary-images > .group2 > div').appendTo('.secondary-images > .group2');

来源

2017-02-16 19:50:37

这将做到这一点：

var $element = $('.secondary-images > .group2 .field__item').detach(); 
$('.secondary-images > .group1').append($element);

来源

2017-02-16 19:53:38 Chris

试试这个：

$('.secondary-images .group2 .field__item').appendTo($('.secondary-images .group1'));

来源

2017-02-16 19:55:17 mhshimul

<script> 
    $(document).ready(function() { 
    $(".group1").append($(".group2").detach()); 
    }); 
</script>

就在</body>

下面是一个例子：http://plnkr.co/edit/U6NwzpcYFojCrDkXWMRt?p=preview

来源

2017-02-16 19:59:11 ir0h

感谢您的帮助。 –

这对我有效。

$('.secondary-images .group2 .field__item').detach().appendTo($('.secondary-images .group1')); 
$('.secondary-images .field__item').each(function() { 
    if ($(this).find('picture').length) {} else { 
     $(this).remove(); 
    } 
});

来源

2017-02-17 08:56:17

我需要将图像从一个元素移动到另一个元素

回答

相关问题