1

特定のクラスを持つ要素の後に、親 [LI] 要素を独自の子 [UL] に複製したいモバイルメニュー (これに基づく) に取り組んでいます。

問題 01: 最初の問題は、単純な CSS セレクターに基づいて要素を複製できることですが、関連する単一の親要素だけでなく、その要素のすべての反復を複製してしまうということです。つまり、毎回複製することになります。親をすべての子に [UL]。

問題 02: [LI] も複製したいのですが、それは子 [A] 要素です... 複製先の子 [UL] 要素ではありません。クローンを実行すると、親 [LI] と子 [A] 要素だけを分離することはできないようです...子 UL 要素をそれ自体にクローンすることには意味がありません。子メニューのループ (ちょっと面白いかもしれませんが、役に立ちません)

どんなアイデアでも大歓迎です！

ここに私のマークアップがあります:

<ul class="dl-menu">
    <li>
         <a href="#">Parent Item 1</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <!-- This is where I want to add just the one cloned parent LI -->
             <li><a href="">Child Item 1A</a></li>
             <li><a href="">Child Item 1B</a></li>
             <li><a href="">Child Item 1C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 2</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <!-- This is where I want to add just the one cloned parent LI -->
             <li><a href="">Child Item 2A</a></li>
             <li><a href="">Child Item 2B</a></li>
             <li><a href="">Child Item 2C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 3</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <!-- This is where I want to add just the one cloned parent LI -->
             <li><a href="">Child Item 3A</a></li>
             <li><a href="">Child Item 3B</a></li>
             <li><a href="">Child Item 3C</a></li>
         </ul>
    </li>
</ul>

私はありとあらゆる風変わりなアイデアを試しましたが、最初のアイデアを提供するために、既存のスクリプトを最も生の形で示します。

function clone_menu_parent(){
    $(this).clone().insertAfter(".dl-back");
}
$('.dl-menu > li').each(clone_menu_parent);

手がかりがあるかもしれない人に感謝します！

編集:最後に必要なマークアップも提供すると役立つと思います:

<ul class="dl-menu">
    <li>
         <a href="#">Parent Item 1</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <li><a href="">Parent Item 1</a></li>
             <li><a href="">Child Item 1A</a></li>
             <li><a href="">Child Item 1B</a></li>
             <li><a href="">Child Item 1C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 2</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <li><a href="">Parent Item 2</a></li>
             <li><a href="">Child Item 2A</a></li>
             <li><a href="">Child Item 2B</a></li>
             <li><a href="">Child Item 2C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 3</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <li><a href="">Parent Item 3</a></li>
             <li><a href="">Child Item 3A</a></li>
             <li><a href="">Child Item 3B</a></li>
             <li><a href="">Child Item 3C</a></li>
         </ul>
    </li>
</ul>

当然、これが UL を子として持つ任意の LI 要素で機能する場合は素晴らしいことです...その結果、3、4、5、および + レベルの深さでメニューを機能させることができます。

最終編集:

最もうまく機能したソリューション (内部要素から逆方向に機能する独創的なアイデアを提供してくれた btm1 に感謝)。

$(".dl-back").each(function(){
    var parent = $(this).parents('li');   
    var copy = parent.clone();
    $(copy).find(".dl-submenu").remove().end();     
    $(this).after(copy);
});

以下の子にクローンを作成するための他の優れたアイデアがあることに注意してください...同様の状況にあり、btm1によって提供される修正が機能しない場合（つまり、内部から逆方向に作業することはできません要素が適切に定義されていないため）、私のように特別な要件がない場合は、完全に実行可能な代替手段であるため、以下の他の回答を確認してください;）

4

3 に答える 3

0

私はあなたのコードを取り、それをフィドルに貼り付けてから答えを出しました

どうぞ 

$('.dl-menu > li > a').each( function(){
    var $this = $(this);
    $newLI = $('<li>').append( $this.clone() );
    $newLI.insertAfter(    $this.next('ul').find('.dl-back') );
}); // end on click
于 2013-05-05T05:27:43.640 に答える
0

<a>私が理解していることから、要素を最上位の要素からli子要素に複製したいと考えていulます。これをセレクターとして使用しない理由は次のとおりです。

 function clone_menu_parent(){
      $(this).find("a").clone().insertAfter(".dl-back");
 }
 $('.dl-menu > li').each(clone_menu_parent);

正しい<a>要素を見つけるのに問題が発生した場合は、 のようなクラス指定子を追加してa.FindMe、検索呼び出しを に変更し.find("a.FindMe")ます。

編集::目的の出力を確認したら、関数を次のように変更してみてください。

 function clone_menu_parent(){
      var link = $(this).find("a");
      var linkhtml = link.outerHTML;
      $(this).find(".dl-submenu > .dl-back").after("<li>" + linkhtml + "</li>");
 }
于 2013-05-05T04:59:14.083 に答える