How to dynamically change <li> style without affecting other <li>s?

Question

Hi, I have an unordered list of links.

<ul>
<li><a href="#">Link is really really really really LONNNNNNNG</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

I have set the line-height or the list items to 30px.

ul {width:100px;}
ul li {line-height:30px;}
ul li a {display:block;}

I want to change this on any <li> where the texts wraps to a second line, without affecting the other <li>s. What is the best way to do this in jquery? Thanks in advance.

Answer 1

You should use padding: or margin: instead and omit your line-height. I assume that you want to keep a consistent amount of spacing between each li; use margin and padding instead.

Answer 2

You use plain Javascript to test the string length of each li element - see this question - and modify it how you want (with Javascript, JQuery or another JS Library).

Answer 3

Thanks for the suggestion, Dave. I think i figured it out. this is what I did:

$('ul li').each(function(){
var menuHeight = $(this).outerHeight();                               
if(menuHeight != 30){
$(this).addClass('squeeze');
}else{
$(this).removeClass('squeeze'); }
});

basically i'm looking through each<li> and saving the height in a variable. if the <li> is not 30px, addClass 'squeeze'. Prob don't need the else statement, but i threw it in for shits and giggles.

thanks everyone