¿Puede JQuery detectar el último elemento en una línea antes de que se cierre en la segunda línea?

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> 

ejemplo html:

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

que tiene un menú de navegación superior, que contiene un UL con LI de flotaron a la izquierda.

Cada LI tiene un estilo CSS {border-right 1px solid} que actúa como separador entre cada opción de menú y he usado el selector CSS último-de-type para eliminar el borde-derecha en el último LI.

Todo esto se ve muy bien hasta que se vuelve a clasificar según el tamaño de la ventana del navegador y algunos de los LI caen a una segunda línea. La regla de diseño de último hijo todavía se aplica según sea necesario, pero en este punto también quiero eliminar el borde derecho del último LI antes de que se ajuste a la segunda línea.

¿Hay una forma de jQuery o Javascript general de detectar el último elemento en una línea antes de un salto de línea/salto de línea?

Answer 1

Puede medir su 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();