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">
-
1Why don't you change the CSS class of the parent and make the ul / li work as div / p tags? PS: On the second code snipet, the div tag is closed with a </ul> tag.rreyes1979– rreyes19792012-01-18 14:22:49 +00:00Commented Jan 18, 2012 at 14:22
-
Becouse, i use wordpress menu nav, and menu has lava menu javascript efects, the second level of menu use div structure, if i change wordpress menu functions to div structure, menu dont working.Foxsk8– Foxsk82012-01-18 14:26:10 +00:00Commented Jan 18, 2012 at 14:26
Add a comment
|
3 Answers
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>");
Comments
you could use the replace with but you would need to build up the html eg:
$('li').replaceWith('<p><a href="#">Link</a></p>');
Comments
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)
