Add text of innerHTML of parent node to child node

I have some jQuery navigation, and I'd like to add the parent anchor to the child ul in the dropdown so that this:

 <li class="parentUl">
    <a class="parentLink" href="somewhere">Parent Link</a>
    <ul class="childUl">
        <li class="childUl">
            <a class="childLink">Child Link</a>
        </li>
    </ul>
</li>

becomes this:

<li class="parentUl">
  <a class="parentLink" href="somewhere">Parent Link</a>
  <ul class="childUl">
  **<li class="parentUlClone">
       <a class="parentLink开发者_JAVA百科Clone" href="somewhere">Parent Link</a>
    </li>**
    <li class="childUl">
        <a class="childLink">Child Link</a>
    </li>
  </ul>
</li>

Any thoughts

Here is a solution for your case that should get you started. It should work with multiple "parentUl" as well.

Here is the code:

$(".parentUl").each(function () {
    //build the parent link clone
    var parentLink = $(this).children(".parentLink").first().clone();
    parentLink.removeClass("parentLink");
    parentLink.addClass("parentLinkClone");

    //build the li "clone" - which isn't a clone at all, really
    var li = $(document.createElement("li"));
    li.addClass("parentUlClone");

    //add the link to the li element
    li.prepend(parentLink);

    //add the newly created li element to the childUl
    var childUl = $(this).children(".childUl").first();
    childUl.prepend(li);
});

The original HTML:

<ul>
    <li class="parentUl">
        <a class="parentLink" href="somewhere">Parent Link</a>
        <ul class="childUl">
            <li class="childUl">
                <a class="childLink" href="other">Child Link</a>
            </li>
        </ul>
    </li>
</ul>

The resulting HTML:

<ul>
    <li class="parentUl">
        <a class="parentLink" href="somewhere">Parent Link</a>
        <ul class="childUl">
            <li class="parentUlClone">
                <a class="parentLinkClone" href="somewhere">Parent Link</a>
            </li>
            <li class="childUl">
                <a class="childLink" href="other">Child Link</a>
            </li>
        </ul>
    </li>
</ul>

Note that I pulled out the a tag instead of cloning the entire li element. You may want to do that differently.

Here is a fiddle to play around with it: http://jsfiddle.net/xonev/U6djs/

$(".parentUl").clone().find(".childUl").remove().end().prependTo($(".parentUl").children("ul")).removeClass("parentUl").addClass("parentUlClone").children().removeClass("parentLink").addClass("parentLinkClone");

Big long untested chain!

EDIT: Hah, actually worked.

Here it is broken down some and a fiddle. This will only work if you only have one of each of the elements on the page, but the idea can easily be expanded to multi.

http://jsfiddle.net/XGann/1/

// clone the parent
var parentClone=$(".parentUl").clone();

// remove the childUl from the clone
parentClone.find(".childUl").remove();

// prepend the clone to the child ul
parentClone.prependTo($(".parentUl").children("ul"));

// remove the old class and add the new
parentClone.removeClass("parentUl").addClass("parentUlClone");

// remove the old class and add the new to the link
parentClone.children().removeClass("parentLink").addClass("parentLinkClone");

That's my long ass chain :)

$('.parentUl').clone().removeClass('parentUl').addClass('parentUlClone').find('>ul').remove().end().prependTo('ul.childUl');