Question

我有这个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);

Answer 1

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

在</body>

之前

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

Answer 2

1.-错误：确保dom可用于操作。所以这应该正常工作：

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

2.-您希望它的工作方式：由于布局，上面的代码将使整个group2 div出现在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>
-->

这将从group2分离并附加每个field__item并将其放在group1上，之后你可以用group2做任何你喜欢的事情，要么删除它，要么让它在以后填充内容。

Answer 3

您应该能够在一行中完成此操作。你可以加入一个函数或事件。

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

Answer 4

以下代码应该可以正常运行：

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

简短而简单。

Answer 5

这样做：

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

Answer 6

试试这个：

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

Answer 7

这对我有用。

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

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

7 个答案: