javascript - Jquery按属性查找元素集并将它们包装在一个新的div中

Question

我有一堆<ul>具有属性 data-year 的 s。我想将具有相同值的数据年属性包装在 div 中，如下所示：<div class="year"><div>

前：

<div class="projectLists">
    <ul data-year="2013">
        <li>items ...   
    </ul>
    <ul data-year="2013">
        <li>items...
    </ul>
    <ul data-year="2012">
        <li>items ...
    </ul>
    <ul data-year="2012">
        <li>items ...
    </ul>
    <ul data-year="2011">
        <li>items...
    </ul>
    <ul data-year="2011">
        <li>items...
    </ul>
</div>

之后应该是这样的：

<div class="projectLists">
<div class="year">
    <ul data-year="2013">
        <li>items ...
    </ul>
    <ul data-year="2013">
        <li>items...
    </ul>
</div>
<div class="year">
    <ul data-year="2012">
        <li>items ...
    </ul>
    <ul data-year="2012">
        <li>items...
    </ul>
</div>
<div class="year">
    <ul data-year="2011">
        <li>items ...
    </ul>
    <ul data-year="2011">
        <li>items...
    </ul>
</div>
</div>

我已经尝试过多次包装每个 ul 并且没有预期的结果：

$('.projectList ul').each(function(){
        var year = $(this).attr('data-year');
        //alert(year)
        console.log(year);

        $('.projectList ul[data-year=' + year + ']').wrapAll('<div class="year">');
        $('.projectList ul[data-year=' + year + ']').eq(0).before('<h2>'+ year +'</h2>');

});

任何帮助都会很棒，谢谢。

Answer 1

我建议：

var $ul = $('.projectLists > ul'),
    years = {};

$ul.each(function(){
   years[$(this).data('year')] = '';
});

for (year in years) {
  $ul.filter('[data-year='+ year +']').wrapAll('<div class="year"></div');
}

http://jsfiddle.net/ghvUV/

Answer 2

var $lists = $('.projectLists > ul'),
    years = [];

$lists.each(function() {
    var year = this.getAttribute('data-year');
    if ( ! ~$.inArray(year, years) ) {
        years.push(year);
    }
});

$.each(years, function (i, year) {
    $lists.filter('[data-year=' + year + ']').wrapAll('<div class="year">');
});

这是小提琴：http: //jsfiddle.net/CKxy8/1/

Answer 3

获取一个包含唯一年份集合的数组，遍历该数组，为每一年选择所有具有该年份的 ul 元素并将它们包装在一个新的 div 中。

Answer 4

您可以在迭代时检查父级，以查看您是否已经添加了“年”类。下面的代码按您的预期工作。jsFiddle

$('.projectLists ul').each(function(){
    var year = $(this).attr('data-year');

    if(!$(this).parent().hasClass("year")) {
        $(".projectLists ul[data-year='"+year+"']").wrapAll('<div class="year">');
        $(".projectLists ul[data-year='"+year+"']").eq(0).before('<h2>'+ year +'</h2>');
    }

});