分离和附加 divs/html jquery

Posted 2023-02-16

【中文标题】分离和附加 divs/html jquery

【英文标题】：Detach and append divs/html jquery

【发布时间】：2016-03-10 15:13:12

【问题描述】：

我认为这有点简单，但我无法理解这一点。我开始关注 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 并将它们放入/附加到 .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。现在我需要一个一个地分离/附加它们，并阅读很多主题，我想我需要在某个地方放置一个循环/每个，但我不知道如何在搞砸了几个小时后我没有靠近.

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

【参考方案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>

【参考方案2】：

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

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

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

Example Fiddle

【讨论】：

谢谢，就像一个魅力！它给了我我需要的东西

【参考方案3】：

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

例如使用选择器：

$("#bar > div")

或使用 children() 函数：

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

也可以看看这篇文章，你的答案可能在这里：jQuery - get all divs inside a div with class ".container"