8 
    <style>
    .ms_menu ul{list-style:none;}
    .ms_menu ul li{float:left; padding:5px; border-right:1px solid #000000;}
    .ms_menu ul li:last-of-type{border-right:none;}
    </style>

html の例:

    <div class="ms_menu">
     <ul>
       <li>menu1</li>
       <li>menu2</li>
       <li>menu3</li>
       <li>menu4</li>
       <li>menu5</li>
       </ul>
    </div>

LI が左に浮いている UL を含むトップ ナビゲーション メニューがあります。

各 LI には、各メニュー オプション間の区切りとして機能する CSS スタイル {border-right 1px solid} があり、CSS セレクタ last-of-type を使用して、最後の LI の border-right を削除しました。

ブラウザー ウィンドウのサイズが変更され、LI の一部が 2 行目にドロップダウンされるまで、これはすべて見栄えがします。最後の子スタイル ルールは必要に応じて引き続き適用されますが、この時点で、2 行目に折り返す前に、最後の LI から border-right も削除したいと考えています。

ワードラップ/改行の前に行の最後の要素を検出するjQueryまたは一般的なJavascriptの方法はありますか?

4

1 に答える 1

7

あなたはそれらを測定することができますoffset：

$(window).resize(function() {

    var offsets = [],
        $listItems = $('.ms_menu li');

    $listItems.each(function() {
        offsets.push( $(this).offset().top );
    });

    $.each(offsets, function(i, v) {
        $listItems.eq(i).css('border-right-width', v > offsets[index + 1] ? 0 : 1);
    });

}).resize();
于 2011-08-15T15:32:29.923 に答える