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

【问题标题】：Jquery finding set of element by attribute and wrapping them in a new divJquery按属性查找元素集并将它们包装在一个新的div中
【发布时间】：2013-08-15 16:11:28
【问题描述】：

我有一堆<ul>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>');

});

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

【问题讨论】：

标签： javascript jquery wrapall

【解决方案1】：

您可以在迭代时检查父级，看看您是否已经添加了“年”类。下面的代码按您的预期工作。 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>');
    }

});

【讨论】：

这每年都单独包装，但是我已经可以看到这个解决方案在另一个上下文中派上用场了。很酷。谢谢。
@mwu56 我链接到了错误的 jsFiddle。但是，我的代码可以满足您的要求。我已经更新了我的 jsFiddle，所以你可以看看。

【解决方案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/

【讨论】：

【解决方案3】：

我建议：

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/

【讨论】：

使用对象键作为一个唯一的数组......很好。以前从未见过。只是不要忘记检查hasOwnProperty。
这是查找唯一年份的好方法，因为对象键必须是唯一的。
@JosephSilber 实际上这是我第一次使用对象的键作为唯一标识符。使用hasOwnProperty 是一个很好的建议和一个很好的做法，但我认为在这种情况下没有必要。感谢您的意见。

【解决方案4】：

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

【讨论】：