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并包含一个tabarea分类div。

我知道我可以单独列出每个班级，但将来可能会增加更多。它必须在客户端完成，因为HTML是在我正在使用的选项卡界面之后生成的（jQuery UI选项卡）。

基本上，我一直坚持如何选择多个类选择器来启动该功能。

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

你可以这样做：

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

更新：live demo

Answer 3

这很简单......

$('.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执行它）

根据动态类包装div？

3 个答案: