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

我想使用jQuery在

div

中包装类元素集，但找不到解决方案

HTML:

内容
内容
内容
内容
内容

您可以使用

.wrap（）

将内容包装在

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>

内容
内容
内容

演示

API:

添加了一条换行符，以便您可以在此处看到差异：）

代码

$(function() {

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

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

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




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

$（函数（）{
$（'.first'）.wrapAll（''）
$（'.second'）.wrapAll（''）
$（'.third'）.wrapAll（''）
警报（$（'.view content'）.html（））；
});​

使用wrapAll（）方法

$（函数（）{
变量类=['.first'，'.second'，'.third']；
对于（i=0；i

---

演示：

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

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

​$（“.view content>div”）。每个（函数（）{
$（“.view content>”+this.className）.wrapAll（“”）；
});​

---

演示：

您可以尝试以下方法：

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());

var arr=$（“.view content div”）.map（函数（）{return$（this.attr（'class'）；}）.get（）；
var结果=$.unique（arr）；
var i；
对于（i=0；i

这里有一个例子：

---

@H2Ooooo给你：）不错！如果你愿意，可以把它作为你的答案，干杯。伙计们，怎么样？：）@VisioN Broooo您最近怎么样：P okies+1对您来说也是如此。应该注意，当前形式的此方法必须使用子组合选择器（>），如图所示。如果不这样做，将导致与特定类名匹配的每个项都有一个包装div。（例如，在本例中，类为“third”的div将被包装在类为“column”的两个div中）。这太棒了！非常感谢你！

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

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());