1

次の順不同のネストされたリスト構造があるとします。

<ul id="nestedList">
    <li>
        Item A
        <ul>
            <li>Item A Descrip</li>
        </ul>
    </li>
    <li>
        Item B
        <ul>
            <li>Item B Descrip</li>
        </ul>
    </li>
    <li>
        Item C
        <ul>
            <li>Item C Descrip</li>
        </ul>
    </li>
</ul>

トップレベルの li 要素 (アイテム A、アイテム B など) のみをスタイル設定し、「説明」li 要素をスタイル設定しないために、どの jQuery セレクターを使用する必要がありますか?

jQueryのドキュメントによると、選択した要素の直接の子のみを選択する.children()セレクターを使用してみましたが、試したものはすべて、リスト全体または第2レベルのli要素のみをスタイルしました。

私が使用していたjQueryは次のとおりです。

$('#nestedList').children().css('font-weight', 'bold');

と：

$('ul#nestedList').children().css('font-weight', 'bold');

UPDATE私はこれのためにjsFiddle を作成したので、それをいじってください...

4

4 に答える 4

4

「しかし、私が試したものはすべて、リスト全体のスタイルを設定しました」

これは、最上位に配置されたスタイルが最上位のスタイルから継承されているためです。

ネストされたリストでこれらのスタイルをオーバーライドする必要があります。

$('#nestedList').children().css('font-weight', 'bold')
                .find('li').css('font-weight','normal');

作業例: http://jsfiddle.net/w66rK/

于 2011-07-20T16:37:26.463 に答える
1

これを試して

$('#nestedList > li').css('font-weight', 'bold');
于 2011-07-20T16:33:28.867 に答える
0 
$('#nestedList > li')

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

于 2011-07-20T16:33:39.900 に答える
0

直接 CSS を使用するのが最も簡単です。

#nestedList > li {
    /* direct li descendants of the parent ul */
    /* CSS */
}

もちろん、同じセレクターが jQuery でも機能します。

$('#nestedList > li').css('color','red'); // etc...
于 2011-07-20T16:33:40.667 に答える