JQuery 可以在第二行换行之前检测到一行上的最后一个元素吗？答案

【问题标题】：Can JQuery detect the last element on a line before it wraps on the second line?JQuery 可以在第二行换行之前检测到一行上的最后一个元素吗？
【发布时间】：2011-10-27 08:48:58
【问题描述】：

    <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 上的右边框。

在重新调整浏览器窗口大小并将一些 LI 下拉到第二行之前，这一切看起来都很棒。 last-child 样式规则仍按要求适用，但此时我还想在最后一个 LI 中删除右边框，然后再将其折叠到第二行。

在自动换行/换行之前，是否有 jQuery 或通用 Javascript 方法来检测行上的最后一个元素？

【问题讨论】：

标签： jquery css word-wrap line-breaks word-break

【解决方案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();

【讨论】：