1

さて、みんな。私がやろうとしているのは、ネストされた（ul）が内部にある順序なしリスト（ul）を作成することです。メイン（ul）の要素内のクラスを変更しようとしていますが、これを行う方法がわかりません。例を挙げましょう。私がこれを持っているとしましょう：

<ul id="mainNav">
<li><a href="#">Main Item 1</a></li>
<li><a href="#">Main Item 2</a>
   <ul>
    <li><a href="#">subitem1</a></li>
    <li><a href="#">subitem2</a></li>
   </ul>
</li>
<li><a href="#">Main Item 3</a></li>
<li><a href="#">Main Item 4</a>
   <ul>
    <li><a href="#">subitem3</a></li>
    <li><a href="#">subitem4</a></li>
   </ul>
</li>
</ul>

私がやろうとしているのは、「mainNav」でネストされた（ul）を見つけて、jqueryでそれらにクラスを適用することです。さらに、ネストされた（ul）の親（li）にクラスと他の属性を適用する必要があります。これが理にかなっていることを願っています。出力は次のようになります。

<ul id="mainNav">
<li><a href="#">Main Item 1</a></li>
<li class="dropdown"><a href="#" DATA="BLAH">Main Item 2</a> <!-- STUFF GOES HERE -->
   <ul class="dropdown-submenu"> <!-- and here -->
    <li><a href="#">subitem1</a></li>
    <li><a href="#">subitem2</a></li>
   </ul>
</li>
<li><a href="#">Main Item 3</a></li>
<li class="dropdown"><a href="#" DATA="BLAH">>Main Item 4</a>
   <ul class="dropdown-submenu">
    <li><a href="#">subitem3</a></li>
    <li><a href="#">subitem4</a></li>
   </ul>
</li>
</ul>

これが理にかなっていることを願っています。子要素をトラバースして子要素（ul）にクラスを追加してから、親要素（li）に移動して、その要素と（a）要素にもクラスを追加しようとしています。私は完全に迷子になっています、そしてあなたたちが助けることができれば、私はそれを大いに感謝します!!! 皆さんありがとう！！！

4

1 に答える 1

3

これは、単一のjQuery行で行うのはかなり簡単です。

$('#mainNav ul').addClass('dropdown-submenu').parent('li').addClass('dropdown');

cssセレクターを使用してul、mainNavの要素を検索し、次にクラスを追加し、次に別の関数をチェーンしてその親を検索し、ドロップダウンからクラスを追加することに注意してください。

編集：
質問の例に従ってタグにデータ属性を追加するには、次のfind('a:first').attr('data', 'BLAH')ようにビット をチェーンします。

$('#mainNav ul').addClass('dropdown-submenu').parent('li').addClass('dropdown').find('a:first').attr("data", "BLAH");

編集2：
次のレベルのulの子に対処し、おそらくすべての子ulに同じクラスを持たせないようにするには、次のスクリプトを使用できます。 

$('#mainNav > li > ul').addClass('dropdown-menu').parent('li').addClass('dropdown').find('a:first').attr('data-toggle', 'dropdown').addClass('dropdown-toggle');  
$('#mainNav ul ul').addClass('dropdown-child-menu').parent('li').addClass('dropdown-child');`

最初の行のセレクターの変更に注意してください。これによりul、最上位li要素の直接の子孫である'のみが取得されます。

2行目のセレクターは、すべての3番目のレベル+ul要素を取得するように指示します（すべての3番目、4番目などのレベルのul要素を取得します）。

于 2012-11-09T02:38:16.347 に答える