JQueryは、2行目を折り返す前に、その行の最後の要素を検出できますか？

Question

<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}があります。最後のLIの境界線を削除するためにlast-of-typeのCSSセレクタを使用しました。

ブラウザのウィンドウのサイズが変更され、LIの一部が2行目に表示されるまで、これはすばらしく見えます。ラストチャイルドのスタイルルールは依然として適用されますが、この時点で、最後のLIから境界線を削除してから2行目に折り返します。

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

Answer 1

あなたは自分の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();