how to disable autoclosing of tags in jquery

Question

I want to break my <ul> into multiple <ul> tags, I have 10 <li> in my <ul> and I want to break into 2 <ul> (5 <li> each). To do the same, I am taking 5th <li> and appending </ul><ul> using $(this).after().

But Jquery automatically reverse the text and auto close the <ul> .

Any Idea how to disable to auto close?

Cheers, Felix

Answer 1

While David's solution is an elegant one for the specific problem, another possibility for the general auto-closing tags problem would be to not use .append at all. Use a variable instead, and use .html(my_variable) at the end. I came across this while trying to do nested UL lists for this very simple Table Of Content thing:

$(document).ready(function() {
  var prev='';
  var toc = '';
  $("h2, h3, h4, h5").each(function(i) {
    var h = $(this);
    var level = h.attr("tagName");
    if (level != prev) {
      if (prev == '') {
        toc += "<ul>\n";
      }
      else {
        if (level < prev) {
          toc += "</ul>\n";
        }
        else {
          toc += "<ul>\n";
        }
      }
      prev = level;
    }
    toc += '<li><a href="#' + h.attr('id') + '">' + h.html() + "</a></li>\n";
  });
  toc += '</ul>';
  $("#toc").html(toc);
});

Answer 2

You do not want to disable auto close. What you want is to add a new UL after the first one, and then add to that one, the last five LI s of the first list. To get a reference to the LI s following the first five, you can do:

$('myFirstUL li:gt(4)');

gt being greater than zero-based index.

Full code example: http://jsbin.com/ofowe/edit