Question

Is there a way to replace, with Jquery, this:

<ul class="sub-menu">
    <li><a href="#">Link</a></li>
</ul>

to this:

<div class="under">
    <p><a href="#">Link</a></p>
</ul>

Parent element is: <ul id="menu">

Answer 1

You could unwrap the a element and then wrap it in the new elements:

$(".sub-menu").find("a").unwrap().unwrap().wrap("<div class='under'>").wrap("<p>");

The two calls to unwrap remove the li and then the ul, and the two calls to wrap add the div and the p. Note that we have to wrap the div first, then the p.

Here’s a working example (inspect the DOM in the results window to see what you end up with).

Note that I’m assuming the closing ul was meant to be a closing div tag in your second example!

Edit

You could also combine the two calls to wrap, which should be faster:

$(".sub-menu").find("a").unwrap().unwrap().wrap("<div class='under'><p></p></div>");

Another edit

Using unwrap twice seemed a little messy to me. Now that I’ve had a little spare time I’ve thrown together a simple plugin that allows you to unwrap multiple ancestor elements from a target element. I’ve called it unwrapUntil, and you can find it on GitHub. It will work for any number of unwraps, and using it in this specific case would probably be a bit extreme, but it would allow us to do the following:

$(".sub-menu").find("a").unwrapUntil(2).wrap("<div class='under'><p></p></div>");