Skip to main content

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


Comments

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

    ReplyDelete
  2. 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

    ReplyDelete
  3. 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/

    ReplyDelete

Post a Comment

Popular posts from this blog

Slow Android emulator

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?

CCNA 1 Final Exam 2011 latest (hot hot hot)

  Hi! I have been posted content of ccna1 final exam (latest and only question.) I will post the answer and insert image on sunday. If you care, please subscribe your email an become a first person have full test content. Subcribe now  Some question  have not content because this question have images content. So that can you wait for me? SUNDAY 1. A user sees the command prompt: Router(config-if)# . What task can be performed at this mode? Reload the device. Perform basic tests. Configure individual interfaces. Configure individual terminal lines. 2. Refer to the exhibit. Host A attempts to establish a TCP/IP session with host C. During this attempt, a frame was captured with the source MAC address 0050.7320.D632 and the destination MAC address 0030.8517.44C4. The packet inside the captured frame has an IP source address 192.168.7.5, and the destination IP address is 192.168.219.24. At which point in the network was this packet captured? leaving host A leaving ATL leaving...