父節點的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');