jquery add closed tag

Question

I have a problem with jquery. After many tests, no simple solution for me.

My CMS return me this code

<ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul>

I want add after each class=last this code

</ul><ul>

in order to obtain this code

<ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul><ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul><ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul>

I tried with jquery with this code

$('.last').after('</ul><ul>')

but impossible to append this text. I obtain

<ul></ul>

and not

</ul><ul>

Can you give me a solution for my problem. Thanks in advance ;)

Maybe this post will help: http://stackoverflow.com/questions/1644668/jquery-split-long-ul-list-in-smaller-lists — shanabus, Jul 21 '11 at 14:51

score 7 · Accepted Answer · answered Jul 21 '11 at 14:40

7

You can't split a DOM node like that, you have to add a new <ul></ul> and move the relevant subnodes over to it.

On a side note, have you considered not splitting the list at all and instead decorating .last to look like a separator (empty space, which is what I'm assuming you're trying to achieve)?

answered Jul 21 '11 at 14:40

Blindy

65,249
10
91
131

Thanks for responses. I will try with another separator but my first idea is not to touch the code from my CMS. – Hugo Jul 21 '11 at 14:53
Then the separator idea should be better than destructively manipulating the DOM at run-time. You'd have on your hands a brittle (upgrades could break it), non-degradable (turning js off would ruin your site) mess on your hands. – Blindy Jul 21 '11 at 15:03
Yes. you're right, will be better. I'll try to work first in the cms to rewrite the output. – Hugo Jul 21 '11 at 15:11

score 0 · Answer 2 · answered Jul 21 '11 at 14:43

0

I don't have time to code it right now, but I think you could use "detach":

http://api.jquery.com/detach/

Detach the li elements and then add them to a new list and proceed to build your lists that way.

answered Jul 21 '11 at 14:43

Dave L.

9,595
7
43
69

score 0 · Answer 3 · answered Jul 21 '11 at 14:46

Try this(I am assuming this ul lies in some container say div.

var container = $("div");
var ul = $("<ul/>");
var lis = $("ul > li", container);
container.empty();
lis.each(function(){

   ul.append(this);
   if($(this).hasClass("last")){
     container.append(ul);
     ul = $("<ul/>");
   }
});
container.append(ul);

score 0 · Answer 4 · answered Jul 21 '11 at 14:47

0

Kind of brute force but try this:

var newUL = [$('<ul></ul>')];    

$('ul.className li').each(function(i, el) {
   newUL[newUL.length - 1].append($(el));
   if($(el).hasClass('last')) {
      newUL.push($('<ul></ul>'));
   }
});

Once you're done, you can get the new html by saying:

$('#ulParent').empty.append(newUL.join(''));

answered Jul 21 '11 at 14:47

Mrchief

75,126
20
142
189

Thanks but i will first try to change the output from my cms (drupal). If not possible, i keep your solution. – Hugo Jul 21 '11 at 15:21

jquery add closed tag

4 Answers4