Question

有很多类似的问题，但没有一个像这样。我有以下html：

<div class="view-content">

    <div class="section section_2">content</div>
    <div class="section section_2">content</div>
    <div class="section section_1">content</div>
    <div class="section section_4">content</div>
    <div class="section section_4">content</div>

</div>

所有div共享 .section ，但另一个类是动态生成的，具体取决于数据库ID。

如何在同一个div中包含div，如果我不知道动态类？

例如，在下面的Jsfiddle如果我删除了.section类，它将包装好，但我的div有多个类，只有一个是共享的。

谢谢！

Answer 1

var classes = {};
$(".view-content > div").each(function() {
    classes[$(this).attr("class")] = true; // "section section_2"
});
for (singleClass in classes) {
    // No elements will be returned here
    $("." + singleClass).wrapAll('<div class="column" />');
}

你的代码很接近，但问题是字符串返回"section section1"或其他东西，所以当你试图选择那个时，你基本上做$('.section section1')这是不匹配的任何东西。如果要按类结构中的第二个参数进行分组，可以拆分类字符串，然后抓取第二个参数。

var classes = {};
$(".view-content > div").each(function() {
    var temp = $(this).attr("class").split(' ');
    if (temp[1]) {
        classes[temp[1]] = true;
    }
});
for (singleClass in classes) {
    $("." + singleClass).wrapAll('<div class="column" />');
}

http://jsfiddle.net/vzgn7ef7/2/

Ninja编辑。我想指出的几件事情。这将使你的代码依赖于这样一个事实，即总是至少有两个类，而你想要第二个类。如果发生变化，就会中断。

Answer 2

如果您的section-n's始终是连续的，则可以将其简化为单个for循环：

var $sections = $('div.section'),
    sCount = $sections.length;

for (var i = 0; i < sCount; ) {  

    var sClass = $sections[i].className.match(/section_\d+/).shift(),
        $section = $('.' + sClass);

    i = $section.wrapAll('<div>').filter(':last').index('div.section') + 1;
}

在JQuery中包含具有相同类（和多个类）的div

2 个答案:

Here's a fiddle