Question

I have a list like this:

<li rel="2001" class="project">...</li>
<li rel="2001" class="project">...</li>
<li rel="2001" class="project">...</li>
...
<li rel="2007" class="project">...</li>
<li rel="2007" class="project">...</li>
<li rel="2007" class="project">...</li>
...
<li rel="2011" class="project">...</li>
<li rel="2011" class="project">...</li>
<li rel="2011" class="project">...</li>

and so on (as you guessed). Now, I want to grab each of them on year base and group it into something like this:

<ul id="2011">
    <li class="year">2011</li>
    <li rel="2011" class="project">...</li>
    <li rel="2011" class="project">...</li>
    <li rel="2011" class="project">...</li>

<ul id="2017">
    <li class="year">2017</li>
    <li rel="2017" class="project">...</li>
    <li rel="2017" class="project">...</li>
    <li rel="2017" class="project">...</li>

... and so on...

basically: take each li.project and take the value of his attr(‘rel’) and then group them (group(myYear)) into array and wrap each array with ul with attr(id, ‘myYear’) and add another html(

yeah, need help 🙂

thank you!

Answer 1

$("li").each(function(){
var x = "ul#" + $(this).attr("rel"); //the ul with id ID of the LI's rel
if($(x).length > 0) //if ul with that year exist
$(x).append($(this));
else{
$(x).appendTo("body");  //create ul and append to body
$(x).append("<li class='year'>");// append the first li
}
});