Обтекание div на основе динамического класса?

Question

Возьмем, к примеру, следующий HTML-код:

<div class="container">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
<div class="header">Content</div>
<div class="header">Content</div>
<div class="header">Content</div>
<div class="footer">Content</div>
<div class="footer">Content</div>
<div class="footer">Content</div>
</div>

Какой результат я пытаюсь достичь:

<div class="container">

<div class="tabarea">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>

<div class="tabarea">
<div class="header">Content</div>
<div class="header">Content</div>
<div class="header">Content</div>
</div>

<div class="tabarea">
<div class="footer">Content</div>
<div class="footer">Content</div>
<div class="footer">Content</div>
</div>

</div>

Я уже часами искал несколько тем и получаютакже пробовал несколько комбинаций jQuery (но безрезультатно), например:

$('.container div').each(function(){
      $(this).wrap('<div class="tabarea"></div>');
    });

Но при этом выбираются все перечисленные выше div и оборачивается в div, классифицированный как tabarea.

Я знаю, что мог бы перечислитькаждый класс индивидуально, но, вероятно, будет добавлено больше в будущем.И это должно быть сделано на стороне клиента, потому что HTML генерируется после того, как называется используемый интерфейс вкладок (вкладки пользовательского интерфейса jQuery).

По сути, я застрял на том, как выбрать множественный классселекторы сразу для запуска функции.

Answer 1

Вы можете сделать:

var classes = [];

$('div.container div').each(function() {
    var cssClass = $(this).attr('class');
    if ($.inArray(cssClass, classes) == -1)
        classes.push(cssClass);
});

var i = classes.length;
while (i--) {
    $('div.' + classes[i]).wrapAll('<div class="tabarea"></div>');
}

Это создаст список всех отдельных классов и затем обернет каждую группу (при условии, что они рядом друг с другом)

http://jsfiddle.net/PCXvb/2/

Answer 2

Это просто ...

$('.container div').each(function()
{
    // Make sure this div isn't already inside a tabarea div
    if (!$(this).parent('.tabarea').length) {
        // Call wrapAll to wrap all divs of this class
        $("div." + $(this).attr("class")).wrapAll('<div class="tabarea"></div>');
    }
});

Это будет динамически читать то, что у вас было, но вместо того, чтобы обернуть все, оно возьмет класс div и выберет все элементы div с этим классом. Поэтому он предложит вам быстрое и динамичное решение. Однако вы, вероятно, можете улучшить его (теперь он будет делать это во многом, так как выполняет это для каждого элемента div в контейнере)

Answer 3

вы можете сделать что-то вроде этого:

var container = $('<div class="tabarea"></div>')
                    .insertBefore('.container div.body:first');
$('.container div.body').appendTo(container);

и вы можете расширить его для нескольких селекторов:

var container = $('<div class="tabarea"></div>');
var selectors = [
    ".container div.body",
    ".container div.header",
    ".container div.footer"
];
$.each(selectors,function(i,selector){
    var el = $(selector);
    var c = container
        .clone()
        .insertBefore(el.eq(0));
    el.appendTo(c);
});

ОБНОВЛЕНИЕ : живая демонстрация