将两个 div 组合在一起答案

【问题标题】：Group two divs on one another将两个 div 组合在一起
【发布时间】：2015-09-21 21:01:58
【问题描述】：

也许它有点愚蠢，但它仍然不起作用。我试图用另一个 div 包装两个不同类的 div，但我当前的输入只是自动关闭 div。

有几组具有 .panel-heading 和 .panel-body 类的 div 是两个一组。

我试图用 .panel 面板默认类的 div 将每一对包装起来，但我的代码关闭了 div，所以它只创建了两个空的 div。我不知道我的代码有什么问题。我正在使用 jquery

    <html>
<body>
<div class="panel-head"></div>
<div class="panel-body"></div>
<div class="panel-head"></div>
<div class="panel-body"></div>
<div class="panel-head"></div>
<div class="panel-body"></div>
</body>
</html>

还有 jquery

$('div.panel-head').before (
'<div class="panel panel-default">');
$('div.panel-body').after ('</div>');

但是这段代码创建了两个 div 自动关闭和打开标签，不允许环绕。我无法在智能手机上创建 jsfiddle，因为我无法在电脑上使用互联网，请有人告诉我如何绕过这种行为

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这是我从here 那里得到的：

$(".panel-head").each(function() {
    $(this).next(".panel-body").addBack().wrapAll("<div class='panel panel-default' />")
});

编辑

最初它使用andSelf()，但已弃用，我将其更改为addBack()

【讨论】：

请注意，andSelf 已弃用，取而代之的是 addBack
所以这段代码会得到 .panel-head 类的 div 之后有一个 .panel-body div 对吗？我只有一个疑问，为什么要在函数值上设置索引？
确实如此。 index 不是必需的，因为它没有被使用。我会删除它。

【解决方案2】：

希望这是您正在寻找的。您将不得不进行一些错误检查（例如，头部和身体的长度必须相同）。

// Get all heads and bodies
var $phead = $('.panel-head');
var $pbody = $('.panel-body');

// loop to create default panel and insert head and body
for (int i = 0; i < $phead.length; i++)
  {
    var h = $($phead[i]);
    var b = $($pbody[i]);
    
    // create new div
    var d = $('<div />', class: 'panel-default');
    // append body and head
    h.appendTo(d);
    b.appendTo(d);
    
    //append new div to body
    $('body').append(d);
}

【讨论】：

这个解决方案运行良好，但另一个调整得更好，但这个更适合处理更大的对象链，谢谢