-1

私はこれについて前進していないので、あなたの助けが必要です.

wordpress 用の 3 つのネストされたメニューです。次のようになります。

<ul class="sub-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#" class="has_children">Link with children</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#" class="has_children">Link with children</a>
                 <ul class="sub-menu">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul> 
            </li>
         </ul>
    </li>
</ul>

has_childrenを持つ各リンクにクラスを追加したいul.sub-menu。

私のコードは次のとおりです。

jQuery.each(jQuery('ul.sub-menu li').has('ul.sub-menu'), function() {
    jQuery('a', this).addClass('has_children');
})

これは最初の ul.sub-menu li で機能しますが、他のすべての子リンクhas_childrenには、サブメニューがなくてもクラスがあります。

編集[解決策]：

jQuery.each(jQuery('ul.sub-menu li').has('ul.sub-menu'), function () {
jQuery('>a', this).addClass('has_children');

}))

それはトリックをしました！：） ありがとう

4

2 に答える 2

1

aセレクターを変更して、現在のダイレクトのみに一致するように変更する必要があります。liそうしないと、aすべてのレベル内のすべてに一致します。>a次のように、直接aのみ一致させるために使用します。

jQuery.each(jQuery('ul.sub-menu li').has('ul.sub-menu'), function () {
    jQuery('>a', this).addClass('has_children');
})

DEMO -a現在のli

デモでは、最初の HTML に含まれていたすべてのクラスを削除してhas_children、実際にスクリプトによって期待どおりに追加されていることを示しました。

于 2013-02-01T23:04:08.480 に答える
0

jsFiddle

HTML：

<ul class="sub-menu">
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link with children</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a>
            </li>
            <li><a href="#">Link with children</a> 
                <ul class="sub-menu">
                    <li><a href="#">Link</a>

                    </li>
                    <li><a href="#">Link</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

jQuery：

$('ul.sub-menu li').each(function () {
    if ($(this).find('ul').hasClass('sub-menu'))  $(this).find('a:first').addClass('has_children');
});
于 2013-02-01T23:09:13.847 に答える