JQuery обернуть несколько элементов div в одном классе

Здравствуйте, я хотел бы использовать 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>

Заранее спасибо за помощь

Ответы на вопрос(5)

Demo http://jsfiddle.net/kQz4Z/8/

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

Добавлена линия разрыва, чтобы вы могли увидеть разницу здесь :)http://jsfiddle.net/kQz4Z/10/

code

$(function() {

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

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

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




    alert($('.view-content').html());
});​
 05 июн. 2012 г., 13:54
@VisioN Broooo, как ты был: P хорошо +1 к тебе, чувак
 05 июн. 2012 г., 13:52
Ребята, а как на счетmine dynamical? :)
 05 июн. 2012 г., 13:32
Этот метод динамически:jsfiddle.net/kQz4Z/11
 05 июн. 2012 г., 13:35
@ h2ooooooo здесь вы идетеjsfiddle.net/ZXb4Y/1 :)) Хороший! установите его как ваш ответ, если хотите, ура.

Или вот очень короткое динамическое решение:

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

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

 08 июн. 2014 г., 05:36
Следует отметить, что этот метод в его текущей форме ДОЛЖЕН использовать селектор дочернего комбинатора (& gt;), как показано. Невыполнение этого требования приведет к созданию div для каждого элемента, который соответствует определенному className. (Например, в этом случае элементы div с классом «третий» будут обернуты в ДВА блока с классом «столбец»).

Используйте метод wrapAll ()

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

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

});

Демо-версия:http://jsfiddle.net/g9G85/

Вы можете попробовать это:

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() обернуть что-то в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>

Ваш ответ на вопрос