jquery replaceWith not working with

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

Can you post the original markup that's rendered by the application? It will make it a lot easier to translate to what you want. — Popnoodles, Feb 01 '13 at 22:12
It might be worth it to break it into a couple steps: 1) parse the html and populate a js object. 2) build a new menu using the js object — Malk, Feb 01 '13 at 22:13
@Malk is right. You should do it this way. Otherwise you're trying to manipulate HTML by shoving closing tags where they don't belong, which isn't the best idea. — Popnoodles, Feb 01 '13 at 22:18

score 0 · Answer 1 · answered Feb 01 '13 at 22:40

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

ieeeh, thank you very much! I wasn't aware of wrapinner. That is close but not feasible in this situation. however, your code worked perfectly once customized slightly for my environment! I tried to vote you up but apparently I need reputation which I do not have. — user2033925, Feb 04 '13 at 22:26

jquery replaceWith not working with

1 Answers1