Can JQuery detect the last element on a line before it wraps on the second line?

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>

example html:

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

I have a top nav menu which contains a UL with LI's floated left.

Each LI has a CSS style {border-right 1px solid} which acts as a separator between each menu option and I have used the CSS selector last-of-type to remove the border-right on the last LI.

This all looks great until the browser window is re-sized and some of the LI's drop down on to a second line. The last-child styling rule still applies as required but at this point I also want to remove the border-right from the last LI before it wraps down onto the second line.

Is there a jQuery or general Javascript way of detecting the last element on a line before a word-wrap/line break?

Answer 1

You can measure their 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();