1

このようなマークアップがあります

    <ul class = "main_nav">
    <li>
        <ul class = "sub_menu">
            <li>hello</li>
            <li>world</li>
            <li>English</li>
        </ul>
    </li>
    <li>
        <ul class = "sub_menu">
            <li>hello</li>
            <li>world</li>
            <li>English</li>
        </ul>
    </li>
    <li>
        <ul class = "sub_menu">
            <li>hello</li>
            <li>world</li>
            <li>English</li>
        </ul>
    </li>
</ul>

今、私はborder bottomそれぞれliに insideを与えsub_menuましたが、最後の境界線の下を見たくないすべてのリスが来ているので、次のようなjqueryスクリプトを使用しました:

$('.sub_menu > li').last().css('border', '0');

ただし、最後の 1 つだけに有効です。各セクション
の最後のボーダーボトムを削除するにはどうすればよいですかli

4

5 に答える 5

3 
$('.sub_menu > li:last-child').css('border', '0');

:last-child疑似要素は、一致したすべての要素の最後ではなく、各親子グループ内の最後の要素を選択します。

于 2013-04-06T12:14:33.720 に答える
2

jquery は必要ありません。CSS で :last-child セレクターを使用して、最後の要素の境界線をオフにするだけです。

.sub_menu > li {
    border-bottom: solid black 1px;
}

.sub_menu > li:last-child {
    border: none;
}

編集：Praveenがコメントしたように、 :last-childIE8のみでサポートされていません:first-child

したがって、常に.last各サブメニューの最後の項目にクラスを追加し、上記の :last-child 疑似セレクターの代わりにこの CSS ルールを使用することができます。

<li class='last'>English</li>

.sub_menu > li.last {
    border: none;
}
于 2013-04-06T12:19:38.353 に答える
0 
$('.sub_menu').each(function() {
    $(this).find('li:last').css('border','0');
});

そこには。:)

于 2013-04-06T12:12:52.367 に答える
0

これを試して：

$('.sub_menu').each(function() {
    $(this).find('li').last().css('border', '0');
});

デモ

于 2013-04-06T12:13:44.187 に答える
0

なぜ.each()関数を使わないのですか？

$( ".sub_menu" ).each( function() {
    $( this ).children( "li" ).last().css( 'border', '0' );
} );

実際には、別の方法を使用して同じことを行うことができます。

$( ".sub_menu > li:last-child " ).css( 'border', '0' );

また、CSS では:

.sub_menu > li:last-child {border: 0;}

注: CSS メソッドは IE 8 以下では機能しません。

于 2013-04-06T12:15:33.393 に答える