CODEWITHSUNDEEP
jquery
Foxsk8
Foxsk8

Reputation: 308

Jquery html tag replace

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">

Upvotes: 0

Views: 3328

Answers (3)

James Allardice
James Allardice

Reputation: 165971

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

Upvotes: 3

AdamKG
AdamKG

Reputation: 14081

var newdiv = $("<div></div>")
newdiv.addClass("under")
$(".sub-menu a").each(function(){
    newdiv.append("<p></p>").find("p:last").append(this)
})
$(".sub-menu").replaceWith(newdiv)

http://jsfiddle.net/QLkS5/

Upvotes: 0

Steve
Steve

Reputation: 50573

you could use the replace with but you would need to build up the html eg:

$('li').replaceWith('<p><a href="#">Link</a></p>');

JQuery Ref

Upvotes: 0

Related Questions