jQuery replaceWith不起作用</div>

Question

I've been trying to figure this out for several hours without much luck.. I'll ask my specific question first, but then give you the bigger picture after in case my entire approach is wrong.

Specific Question: I'm trying to replace a list item element with some closing tags. The first IF statement below works, the second works with many values in the "html" variable, but as soon as I stick a closing div tag into the variable, the replace fails to occur. I can't figure it out. I've tried escaping the slash in the closing tags with 1-2 backslashes and that doesn't help (with two backslashes the replace occurs but text is rendered on the page instead of code).

$("li.class1").each(function() {
    var li = $(this);
    var span = li.find("span.class2").text();
    if (span.indexOf("<") == 0) {
        var text = $(this).text();
        text = text.substring(1, text.length);
        li.replaceWith('<li><div><ul><li class="Mheader">' + text + '</li>');
    }
    else if (span.indexOf(">") == 0) {
        var html = '</ul></div></li>';
        li.replaceWith(html);
        alert(html);
    }
});

Now, with that said.. I have noticed that FireBug shows closing tags after the first replace happens even though I haven't inserted them yet. I'm hoping that this is just FireBug being smart and inserting them because they are missing.

What I'm actually trying to accomplish: We have an application that renders some plain flyout navigation menus as a large, vertical, unordered list. I want to insert some specially-formatted group names into this list (like below) and then use jquery to replace those specially-formatted group names to effectively chop these "groups" into DIVs. I will then use CSS to lay out each group horizontally in order to create some basic mega menu functionality. The example below correlates with my source code above.

• < Header 1
• item 1
• item 2
• >
• < Header 2
• item 1
• item 2
• >

Desired markup after jquery tweak:

<ul>
<li>
    <div>
    <ul>
    <li class=header>header1</li>
    <li>item1</li>
    .....
    </ul></div>
</li>

Thanks for any feedback. This is my go-to site when I need information like this, but this is the first time I've had to ask!

Thanks,

Tommy

Answer 1

The closing tags get automatically inserted.

You could somehow use .wrapInner, or do something like this:

html = '';
$("li").each(function() { // I removed the class as I don't know if each li has one or if only headers, etc.
    var li = $(this);
    var span = li.text(); // Same here.. removed the class
    if (span.indexOf("<") == 0) {
        var text = $(this).text();
        text = text.substring(1, text.length);
        html += '<li><div><ul><li class="Mheader">' + text + '</li>';
    }
    else if (span.indexOf(">") == 0) {
        html += '</ul></div></li>';
    } else {
        html += '<li>' + li.html() + '</li>';
    }
});
$('ul').html(html);