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>然后应用转换。

我的问题是如何使用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/

希望有所帮助！

Answer 2

var years = [],
    w = [];
$('.videos .video').each(function (i) {
    years[i] = $(this).attr('class').replace(/[a-zA-Z\-]/g, '').trim(' '); // get only the numbers
    if ($.inArray(years[i], w) === -1) w.push(years[i]); // move years in w without duplicates
});

$.each(w, function (i, year) {
    $('.videos .year-'+year).wrapAll('<div class="videogroup group-'+year+'"></div>'); // wrap items
});

FIDDLE

Answer 3

这是一个没有维护的版本〜40年了！

http://jsfiddle.net/kvnBn/

$(document).ready(function () {
    for (var year = 2000; year < 2050; year++) {
        if ($('.video.year-' + year).length > 0) {
            $('.video.year-' + year).wrapAll('<div class="videogroup group-' + year + '"></div>');
        }
    }
});

由于不必要的循环，我担心这会比字符串拆分或正则表达式解决方案慢，但在Chrome中运行它只需要1ms。

Answer 4

这有效

function wrap(year){
    $('.year-' + year).wrapAll('<div class="group-' + year + '" />');
}

wrap('2013');
wrap('2012');

http://jsfiddle.net/AeJCf/1/

Answer 5

创建数组的一种方法如下：

var years;
$('.video').each(function() {
    var classes = $(this).getClass().split(/\s+/);
    for(x in classes) 
        if(x.indexOf('year') !== -1) {
            years[x] = x;
});

稍后使用$ .each（）重复提取单个元素。

Answer 6

我提出了一个我非常满意的解决方案。感谢大家的回复。

var years = []; // He'll be holding our values soon.

// Loop through elements with the class `year-` in them.
$('.videos [class*=year-]').each(function() {
    var year = $(this).attr('class').match(/year-(\d*)/)[1]; // Regex gets the year (2013, 2012, etc.)

    // If the array doesn't have the year, we add it.
    if ($.inArray(year, years) == -1) {
        years.push(year);
    }
});

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

6 个答案: