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。测试并将它们放入.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 );

这有效，但可疑，它会分离/附加第一个div。现在我需要一个接一个地分离/追加它们并阅读很多主题，我想我需要在某个地方放一个循环/每个但我不知道如何和我在拧紧几个小时之后没有接近

任何能够让我朝着正确方向前进的人都会这样做吗？

Answer 1

只需使用append()方法并选择所有div，即可轻松移动所有这些内容：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者，如果您想对每个元素执行某些操作，可以使用.each()：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

<强> Example Fiddle

Answer 3

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

例如使用选择器：

$("#bar > div")

或使用children（）函数：

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

另请看这篇文章，您可以在这里得到答案：jQuery - get all divs inside a div with class ".container"

分离并附加divs / html jquery

3 个答案: