Может ли JQuery обнаружить последний элемент в строке перед переносом на вторую строку?

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>

У меня есть главное навигационное меню, которое содержит UL с плавающим левым LI.

Каждый LI имеет стиль CSS {border-right 1pxsolid}, который действует как разделитель между каждым параметром меню, и я использовал последний в своем роде селектор CSS, чтобы удалить рамку справа на последнем LI.

Все это выглядит великолепно до тех пор, пока не появится окно браузера.и некоторые из LI выпадают на вторую строку.Правило стилей last-child по-прежнему применяется по мере необходимости, но в этот момент я также хочу удалить border-right из последнего LI, прежде чем оно будет перенесено на вторую строку.

Есть ли способ 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();