Как динамически изменить стиль <li>, не затрагивая другие <li>s?

Question

У меня есть неупорядоченный список ссылок.

<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>

Я установил высоту строки или элементы списка на 30 пикселей.

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

Я хочу изменить это на любой <li>, где тексты переносятся на вторую строку, не затрагивая другие <li> с.Каков наилучший способ сделать это в jquery?Заранее спасибо.

Answer 1

Вы используете обычный Javascript для проверки длины строки каждого элемента li - см. этот вопрос - и измените его, как хотите (с помощью Javascript, JQuery или другой библиотеки JS).

Answer 2

Спасибо за предложение, Дейв.Я думаю, что я понял это.вот что я сделал:

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

В основном я просматриваю каждый <li> и сохраняю высоту в переменной.если <li> не 30px, добавьте класс 'squeeze'.Возможно, мне не нужно заявление else, но я бросил его для насмешек.

спасибо всем

Answer 3

Вместо этого следует использовать padding: или margin: и опустить line-height.Я предполагаю, что вы хотите поддерживать постоянный интервал между каждым ли;вместо этого используйте поля и отступы.