分离并追加 divs/html jquery

Question

我认为这会有点直截了当，但我无法解决这个问题。我必须关注 html:

<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>     
</div>

<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>

我需要 grab/detach div 的 .test 和 put/append 它们进入 .item div 的。所以第一个 div .test 需要进入第一个 div .item，第二个 div .test 进入第二个 div .item 等等。所以它变成了：

<div id="foo">
<div class="item">1<div class="test">test1</div></div>
<div class="item">2<div class="test">test2</div></div>
<div class="item">3<div class="test">test3</div></div>
<div class="item">4<div class="test">test4</div></div>    
</div>

现在我找到了一些 jquery 代码，我得到了这个：

var child = $('#bar').find("div").eq(0);
var parent = $('#foo').eq(0);

child.detach();
parent.append( child );

这有效，但正如所怀疑的那样，它 detaches/appends 第一个 div。现在我需要一个一个 detach/append 它们，并且通过阅读很多主题，我想我需要在某个地方放一个 loop/each 但我不知道如何并且之后我没有更接近忙活几个小时

任何人都可以用这个把我引向正确的方向吗？

Answer 1

解决方案是获取两个集合并迭代其中一个集合。另请注意，您不需要使用 .detach。 .append 已经这样做了。

var $fooItems = $("#foo .item");
var $barTests = $("#bar .test");

$fooItems.each(function(index, el) {
    $(this).append($barTests.eq(index));
});

Example Fiddle

Answer 2

我认为您的问题有两种解决方案：.childern() 函数或使用 jQuery 选择器

例如使用选择器：

$("#bar > div")

或使用 children() 函数：

$("#bar").children("div");

也看看这个post，你可能会在这里找到答案：jQuery - get all divs inside a div with class ".container"

Answer 3

您只需使用 append() 方法并选择所有 div 即可轻松移动它们：

$('#bar').append( $('#foo div') )

/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>     
</div>

<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>

或者，如果你想对每个元素做一些事情，你可以使用 .each():

$('#foo div').each(function(i, elem) {
  var $elem = $(elem);
  //Do stuff
  $('#bar').append($elem);
});

/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>     
    </div>

    <div id="bar">
    <div class="test">test1</div>
    <div class="test">test2</div>
    <div class="test">test3</div>
    <div class="test">test4</div>
    </div>
<div>

分离并追加 divs/html jquery

Detach and append divs/html jquery

javascript

jquery

html

append

detach