CODEWITHSUNDEEP
listsplit
stav
stav

Reputation: 87

split ul list by li class name with jQuery

I have this ul li list 

<div class="item">
<ul>
<li class="a">A1</li>
<li class="a">A2</li>
<li class="a">A3</li>
<li class="b">B1</li>
<li class="b">B2</li>
<li class="b">B3</li>
<li class="c">C1</li>
</ul>
</div>

I need to split the ul element after every last class of li inseparrate list

How can i split into this with jQuery

<div class="item">
<ul>
<li class="a">A1</li>
<li class="a">A2</li>
<li class="a">A3</li>
</ul>
</div>
<div class="item">
<ul>
<li class="b">B1</li>
<li class="b">B2</li>
<li class="b">B3</li>
</ul>
</div>
<div class="item">
<ul>
<li class="c">C1</li>
</ul>
</div>

Any help please Thank you!

Upvotes: 1

Views: 331

Answers (2)

thor
thor

Reputation: 22460

Assuming HTML elements at the bottom. You can use jQuery.each to prepend elements and do:

$.each( $("ul.old li.a"), function( k, val) {
    $("#ul_a").prepend('<li class="a">' + val.innerHTML + '</li>');
});

$.each( $("ul.old li.b"), function( k, val) {
    $("#ul_b").prepend('<li class="b">' + val.innerHTML + '</li>');
});

$.each( $("ul.old li.c"), function( k, val) {
    $("#ul_c").prepend('<li class="c">' + val.innerHTML + '</li>');
});

HTML:

<div class="item">
<ul class="old">
<li class="a">A1</li>
<li class="a">A2</li>
<li class="a">A3</li>
<li class="b">B1</li>
<li class="b">B2</li>
<li class="b">B3</li>
<li class="c">C1</li>
</ul>
</div>
<div class="item">
    New Lists: <br/>
    <ul id='ul_a'> </ul>
    <ul id='ul_b'> </ul>
    <ul id='ul_c'> </ul>
</div>

Upvotes: 1

jeremywoertink
jeremywoertink

Reputation: 2341

Easiest way would be to use underscore's groupBy, then remove all the html, and reinsert with your new structure.

var items = _.groupBy($('.item ul > li'), function(li) { return $(li).prop('class'); });
for(className in items) {
  var lis = items[className];
  var div = $('<div class="item"></div>');
  var ul = $('<ul></ul>');
  $(lis).each(function(i,e) {
    ul.append($(e));
  });
  div.append(ul);
  $('#container').append(div);
};

Here's a jsfiddle. Not the best implementation, but it should get you close enough! http://jsfiddle.net/p93r1rv4/

Upvotes: 0

Related Questions