1

所以我有这个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-的数组）并遍历每一个，选择相应的 s 然后应用转换。20132012<div>

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

以前，我尝试遍历所有元素并获取它们的类，但这也包括额外的类（如video类）。更不用说，我只想抓住年份，所以这对我的情况没有帮助。

我之前尝试过的一个例子：

var years = [];

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

console.log(years);

代码失败是因为我正在存储整个类而不是删除重复项——这两件事我都不知道该怎么做。

4

6 回答 6

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/

希望有帮助！

于 2013-07-18T15:15:07.643 回答
1 
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
});

小提琴

于 2013-07-18T15:15:54.213 回答
0

这是一个 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 中运行它只需要 1 毫秒。

于 2013-07-18T15:15:24.037 回答
0

这有效

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

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

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

于 2013-07-18T15:21:10.570 回答
0

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

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

以后使用 $.each() 迭代多年来提取单个元素。

于 2013-07-18T15:22:30.200 回答
0

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

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);
    }
});
于 2013-07-18T15:35:38.763 回答