I'd like to break apart a list by inserting closing tags with jquery.
Here's the original:
<ul>
<li>one</l1>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
and i'd like to turn it into:
<ul>
<li>one</l1>
<li>two</li>
</ul>
<ul>
<li>three</li>
<li>four</li>
</ul>
I haven't been able to accomplish this using :nth-child(n) or .html() or .append(), but I'm thinking perhaps some sort of outter html replace would do it. Maybe there's an easier way. Any ideas?
$('li:nth-child(3), li:nth-child(4)').insertAfter('ul').wrapAll('')You can't "break a list". You can either A) remove it and replace it with two lists B) extract some elements to make another list with. The following is terrible terrible practice, but then again so is what you're asking...
$('li:nth-child(3), li:nth-child(4)').insertAfter('ul').wrapAll('<ul />')
If you do the following, you can check the index of the object, and then do something if it is odd/even/modulus/etx
$('div').each(function(idx){
console.log($(this));
console.log(idx);
console.log("");
});
Notice on the .each switch, you can pass it the idx (index) of the element. So.. if your selector selected 4 elements, you can do whatever math you want. Example:
$('ul li').each(function(idx){
if(idx%2==1){
$(this).after('</ul><ul>');
}
});
That would add a after every other one.
This works JSFiddle
var items = $('ul li');
var list = $('ul');
var secondList = "<ul>";
if(items.length > 0) {
var index = parseInt(items.length / 2) ;
for(var i=index; i<items.length; i++){
secondList += "<li>" + items[i].innerHTML + "</li>";
$(items[i]).remove();
}
secondList += "</ul>";
$(secondList).insertAfter(list);
}
