Question

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="parentLinkClone" href="somewhere">Parent Link</a>
    </li>**
    <li class="childUl">
        <a class="childLink">Child Link</a>
    </li>
  </ul>
</li>

Any thoughts

Answer 1

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/