Question

我有一堆具有data-year属性的<ul>。我想在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>');
    }

});

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

4 个答案: