javascript - 获取唯一的类名并循环遍历它们

Question

所以我有这个 HTML:

<div class="videos">
    <div class="video year-2013">...</div>
    <div class="video year-2013">...</div>
    <div class="video year-2013">...</div>

    <div class="video year-2012">...</div>
    <div class="video year-2012">...</div>
    <div class="video year-2012">...</div>
</div>

我的 jQuery 应该执行以下转换:

<div class="videos">
    <div class="videogroup group-2013">
        <div class="video year-2013">...</div>
        <div class="video year-2013">...</div>
        <div class="video year-2013">...</div>
    </div>

    <div class="videogroup group-2012">
        <div class="video year-2012">...</div>
        <div class="video year-2012">...</div>
        <div class="video year-2012">...</div>
    </div>
</div>

我的计划是将所有独特的年份连接到 year-类(在本例中是一个包含 2013 和 2012 的数组)并遍历每个类，选择相应的 <div> s，然后应用转换。

我的问题 是如何使用 jQuery 创建一个包含 year- 年份的数组类，同时确保值是唯一的并且不是手动输入的？

之前，我尝试遍历所有元素并获取它们的类，但这也包括额外的类(如 video 类)。更不用说，我只想捕获年份，但这对我的案子没有帮助。

我之前尝试过的示例:

var years = [];

$('[class*=year-]').each(function() {
    years.push($(this).attr('class'));
});

console.log(years);

代码失败是因为我存储了整个类而不是删除重复项 - 这两件事我都不确定该怎么做。

Answer 1

我喜欢在早上进行很好的 javascript 编码练习:

// Find the unique classes
var uniqueClasses = {};
$(".videos div").each(function() {    
    var classes = $(this).attr('class').split(/\s+/);
    $.each(classes, function(index, className) {
        // Ignore the "video" class
        if (className === "video") {
            return;
        }
        uniqueClasses[className] = true;  
    });    
});

// Restructure the DOM, wrapping each set of unique classes
$.each(uniqueClasses, function(className) {

    var groupClass = "group-" + className.split("-")[1];
    $("." + className).wrapAll($("<div/>")
                           .addClass("video-group")
                           .addClass(groupClass));
});

jsFiddle 在这里:http://jsfiddle.net/dmillz/znxHL/

希望对您有所帮助!