Javascript Jquery按属性查找元素集并将其包装到新的div中

我有一堆

具有属性数据年份。我想用相同的值将数据年属性包装在一个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>');

});

$（'.projectList ul'）。每个（函数（）{
变量年份=$（this.attr（'data-year'）；
//警报（年）
对数（年）；
$（'.projectList ul[数据年='+year+']）.wrapAll（''）；
$（'.projectList ul[数据年='+year+']）.eq（0）.before（''+year+''）；
});

---

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

获取一个包含唯一年份集的数组，迭代该数组，每年选择该年份的所有ul元素，并将其包装在新的div中。

获取一个包含唯一年份集的数组，迭代该数组，对于每一年，选择该年的所有ul元素，并将其包装在新的分区中。

我建议：

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');
}

var$ul=$（'.projectlist>ul'），
年份={}；
$ul.每个（函数（）{
年份[$（本）.data（'year'）]=''；
});
年（年）{
$ul.filter（'[data year='+year+']）.wrapAll（'我建议：

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');
}

var$ul=$（'.projectlist>ul'），
年份={}；
$ul.每个（函数（）{
年份[$（本）.data（'year'）]=''；
});
年（年）{
$ul.filter（'[data year='+year+']）.wrapAll（'
var$lists=$（'.projectLists>ul'），
年份=[]；
$lists.each（函数（）{
var year=this.getAttribute（'data-year'）；
如果（！~$.inArray（年，年））{
年。推（年）；
}
});
美元。每（年，功能（i，年）{
$lists.filter（'[data year='+year+']）.wrapAll（''）；
});

这里是小提琴：
var$lists=$（'.projectLists>ul'），
年份=[]；
$lists.each（函数（）{
var year=this.getAttribute（'data-year'）；
如果（！~$.inArray（年，年））{
年。推（年）；
}
});
美元。每（年，功能（i，年）{
$lists.filter（'[data year='+year+']）.wrapAll（''）；
});

这里有一个问题：
您可以在遍历时检查父级，看看是否已经添加了一个“year”类。下面的代码按照您的预期工作

$（'.projectLists ul'）。每个（函数（）{
变量年份=$（this.attr（'data-year'）；
if（！$（this.parent（）.hasClass（“年”））{
$（“.projectLists ul[数据年=”“+year+”]）；
$（“.projectLists ul[数据年=”+年+“]”]”）.eq（0）.before（“+年+”）；
}
});
您可以在遍历时检查父级，查看是否已经添加了“year”类。下面的代码按照您的预期工作

$（'.projectLists ul'）。每个（函数（）{
变量年份=$（this.attr（'data-year'）；
if（！$（this.parent（）.hasClass（“年”））{
$（“.projectLists ul[数据年=”“+year+”]）；
$（“.projectLists ul[数据年=”+年+“]”]”）.eq（0）.before（“+年+”）；
}
});
使用对象键作为唯一数组…很好。以前从未见过这种情况。请不要忘记检查
hasOwnProperty
。这是一个很好的解决方案，可以找到唯一年份，因为对象键必须是唯一的。@JosephSilber实际上这是我第一次使用对象键作为唯一标识符。使用
hasOwnProperty
这是一个很好的建议和实践，但我认为在这种情况下没有必要。感谢您的输入。使用对象键作为唯一数组…很好。以前从未见过。只是不要忘了检查
hasOwnProperty
。这是一个很好的解决方案，可以找到唯一年份，因为对象键必须是唯一的。@JosephSilber实际上这是我的这是我第一次使用对象的键作为唯一标识符。使用
hasOwnProperty
是一个很好的建议和实践，但我认为在这种情况下没有必要这样做。感谢您的输入。这每年都会单独包装，但我已经看到这个解决方案在另一个上下文中派上用场。非常酷。谢谢。@mwu56 I链接到错误的JSIDdle。但是，我的代码符合您的意图。我已经更新了我的JSIDdle，以便您可以查看。这是每年单独包装的，但是我已经看到这个解决方案在另一个上下文中派上了用场。非常酷。谢谢。@mwu56我链接到了错误的JSIDdle。但是，我的代码符合您的意图。我已经更新了我的JSIDDL这样你就可以看一看了。
$('.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>');
    }

});