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

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”一起工作。

下面是代码：

$(".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/

Answer 2

$(".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 3

这是我的屁股长链:)

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