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:
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:
I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?
You could unwrap the a element and then wrap it in the new elements:
ReplyDelete$(".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>");
you could use the replace with but you would need to build up the html eg:
ReplyDelete$('li').replaceWith('<p><a href="#">Link</a></p>');
JQuery Ref
var newdiv = $("<div></div>")
ReplyDeletenewdiv.addClass("under")
$(".sub-menu a").each(function(){
newdiv.append("<p></p>").find("p:last").append(this)
})
$(".sub-menu").replaceWith(newdiv)
http://jsfiddle.net/QLkS5/