Question

我有一些jQuery导航，我想在下拉列表中将父锚点添加到子ul中，以便：

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

成为这个：

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

任何想法

Answer 1

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

很长的未经测试的链条！

编辑：哈，实际上工作了。

这里分解了一些小提琴。这只有在页面上只有一个元素的情况下才有效，但这个想法很容易扩展到多个。

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

Answer 2

这是我的长链：）

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

Answer 3

这是一个适合您案例的解决方案，可以帮助您入门。它也应该与多个“parentUl”一起使用。

以下是代码：

$(".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);
});

原始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>

生成的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>

请注意，我提取了a标记，而不是克隆整个li元素。您可能希望采用不同的方式。

这是一个玩弄它的小提琴：http://jsfiddle.net/xonev/U6djs/

将父节点的innerHTML文本添加到子节点

3 个答案: