裹在同一类的多个div元素(Wrap multiple div elements on same c

我想用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> 

Answer 1:

演示 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());
});​

Answer 2:

使用wrapAll（）方法

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

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

});

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

Answer 3:

或者这里是很短的动力解决方案：

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

DEMO： http://jsfiddle.net/CqzWy/

Answer 4:

您可以使用.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>

Answer 5:

你可以试试这个白衣：

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

文章来源: Wrap multiple div elements on same class