在同一个类上包装多个 div 元素答案

【问题标题】：Wrap multiple div elements on same class在同一个类上包装多个 div 元素
【发布时间】：2012-06-09 09:55:01
【问题描述】：

我想使用 jQuery 将类元素集包装在 div 中，但找不到解决方案。

HTML：

<div class="view-content">

  <div class="first">content</div>
  <div class="first">content</div>
  <div class="second">content</div>
  <div class="third">content</div>
  <div class="third">content</div>

</div>

期望的结果：

<div class="view-content">

  <div class="column">
    <div class="first">content</div>
    <div class="first">content</div>
  </div>

  <div class="column">
    <div class="second">content</div>
  </div>

  <div class="column">
    <div class="third">content</div>
    <div class="third">content</div>
  </div>

</div>

【问题讨论】：

标签： javascript jquery html class wrapall

【解决方案1】：

你可以试试这个：

var arr = $(".view-content div").map(function() { return $(this).attr('class'); }).get();
var results = $.unique(arr);
var i;

for(i = 0; i < results.length; i++){

    $('.out').append('<div class="columns"></div>');
    $('.'+results[i]).clone().appendTo('.columns:last');
}

alert($('.out').html());

这里是一个例子：

JSFIDDLE

【讨论】：

【解决方案2】：

或者这里是非常简短的动态解决方案：

$(".view-content > div").each(function() {
    $(".view-content > ." + this.className).wrapAll("<div class='column' />");
});

演示： http://jsfiddle.net/CqzWy/

【讨论】：

应该注意，当前形式的这个方法必须使用如图所示的子组合选择器 (>)。如果不这样做，将导致每个与某个类名匹配的项目的包装 div。（例如，在这种情况下，具有“第三”类的 div 将被包装在具有“列”类的两个 div 中）。

【解决方案3】：

使用 wrapAll() 方法

$(function(){
    var classes = ['.first', '.second', '.third'];

    for (i = 0; i < classes.length; i++) {
        $(classes[i]).wrapAll('<div class="column">');
    }

});

演示：http://jsfiddle.net/g9G85/

【讨论】：

这太棒了！非常感谢！

【解决方案4】：

演示 http://jsfiddle.net/kQz4Z/8/

API：http://api.jquery.com/wrapAll/

添加了一个断线，以便您可以在这里看到不同之处:) http://jsfiddle.net/kQz4Z/10/

代码

$(function() {

    $('.first').wrapAll('<div class="column" />')

    $('.second').wrapAll('<div class="column" />')

    $('.third').wrapAll('<div class="column" />')




    alert($('.view-content').html());
});

【讨论】：

@h2ooooooo 你去jsfiddle.net/ZXb4Y/1 :)) 好一个！如果您愿意，可以将其设置为您的答案，干杯。
各位，mine dynamical 怎么样？ :)
@VisioN Broooo 你过得怎么样：P okies +1 给你，伙计

【解决方案5】：

您可以使用.wrap() 将某些内容包装在div 中，但如果您的内容没有排序，则会变得一团糟，下面是一个示例：

输入

<div class="view-content">
    <div class="first">content</div>
    <div class="second">content</div>
    <div class="first">content</div>
</div>

输出

<div class="view-content">
    <div class="column">
        <div class="first">content</div>
        <div class="column">
            <div class="second">content</div>
        </div>
        <div class="first">content</div>
    </div>
</div>

【讨论】：