javascript - 分离和追加 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>

我需要抓取/分离 div 的 .test 并将它们放入/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 );

这有效，但正如怀疑的那样，它分离/append 了第一个 div。现在我需要将它们一一分离/append ，并且通过阅读很多主题，我认为我需要在某处放置一个循环/每个，但我不知道如何做，并且在忙了几个小时后我没有更接近.

谁能帮我指明正确的方向？

Answer 1

只需使用 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>