Jquery Splitting HTML with .append()

Question

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?

Are you looking for a way to break a list of 4 items into two lists of two items. Or something more generic? — Griffin, Aug 09 '11 at 22:22
Why are you performing *basic* content formatting with jQuery? You realize that anyone who is browsing on a platform without Javascript would have a degraded experence? — Devin M, Aug 09 '11 at 22:23
possible duplicate of [jQuery split long ul list in smaller lists](http://stackoverflow.com/questions/1644668/jquery-split-long-ul-list-in-smaller-lists) — Marc B, Aug 09 '11 at 22:23
@Devin, why are you assuming you know better or even know the poster's intentions? Maybe he's just experimenting with jQuery and wants to learn. — Griffin, Aug 09 '11 at 22:25
Im assuming that this would produce a bad expierence for someone who is not using Javascript. If the intention is to learn then thats fine. However it should be noted that this would be a task better applied to getting the markup correct in the first place. — Devin M, Aug 09 '11 at 22:28
@Griffin, thanks for backing me up. That was pretty pretentious of devin to say all of that. — Kristian, Aug 09 '11 at 22:29
@Marc, that isn't what I expected to be the solution, but it actually works. Haha, Thanks! — Kristian, Aug 09 '11 at 22:31

Sinetheta · Accepted Answer · 2011-08-09T23:52:26.290

1

$('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 />')

http://jsfiddle.net/aJWCs/

edited Aug 09 '11 at 23:52

answered Aug 09 '11 at 22:41

Sinetheta

9,189
5
31
52

I agree with you in regards to those limitations. Your solution is essentially a correct one. – Kristian Aug 10 '11 at 17:15

score 0 · Answer 2 · answered Aug 09 '11 at 22:59

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 is what I was doing initially, but some browsers were actually considering it an html error and fixing it by inverting the tags. Thanks for that though — Kristian, Aug 10 '11 at 17:14

score 0 · Answer 3 · answered Aug 09 '11 at 23:04

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

Jquery Splitting HTML with .append()

3 Answers3