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/