3

レスポンシブナビゲーションを作成しようとしていますが、サブメニュー<ul>を含むすべてのトップレベルメニュー項目に<span>を追加したいと思います。何らかの理由で、これはすべてのアイテムにスパンを追加するだけですが、その理由について誰かがアドバイスできますか？

マークアップは次のとおりです。

<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#">Home</a>
            <ul class="nav-submenu">
                <li class="nav-submenu-item">
                    <a href="#">Submenu item 1</a>
                </li>
                <li class="nav-submenu-item">
                    <a href="#">Submenu item 2</a>
                </li>
                <li class="nav-submenu-item">
                    <a href="#">Submenu item 3</a>
                </li>
                <li class="nav-submenu-item">
                    <a href="#">Submenu item 4</a>
                </li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="#">About</a>
        </li>
        <li class="nav-item">
            <a href="#">Services</a>
        </li>
        <li class="nav-item">
            <a href="#">Portfolio</a>
        </li>
        <li class="nav-item">
            <a href="#">Testimonials</a>
        </li>
        <li class="nav-item">
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>

したがって、最初の項目にドロップダウンがあることがわかります。サブメニューを含む各<li>にスパン要素を動的に追加したいと思います。

そしてスクリプト（jQuery）：

$.each($('.nav-item'), function (index, value) {
    if ($('.nav-item').children('ul').length > 0) {
        $(this).append($('<span class="nav-click"></span>'));
    }
});

感謝します！

4

2 に答える 2

3

実際に必要なのはこれだけです。

$('.nav-item:has(ul)').append('<span class="nav-click" />');

LIVE DEMO

を使用する:hasか、このすべてのループ.has()よりもはるかに楽しいでしょう。$.eachクラスループは、セレクターとしてクラスを使用して既に実行されています。原因は、によってさらにフィルター処理された目的の要素のコレクションをhasすべて1行で返します。

http://api.jquery.com/has-selector/
http://api.jquery.com/has/

マルチサブレベルリストを使用することを計画している場合：

$('nav li:has(ul)').append('<span class="nav-click" />');

LIVE DEMO

于 2013-03-24T19:28:42.587 に答える
0

これを試して

$.each($('.nav-item'), function (index, value) {
    if ($(this).children('ul').length > 0) {
        $(this).append($('<span class="nav-click"></span>'));
    }
});

この行に問題があります：

if ($('.nav-item').children('ul').length > 0) {

これは常に最初.nav-itemに見つかったものを選択します

thisそれぞれをループしているので、代わりに使用する必要があります.nav-item

if ($(this).children('ul').length > 0) {
于 2013-03-24T19:18:32.613 に答える