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>

我已将行高或列表项设置为30px。

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

我希望在文本换行到第二行的任何<li>上更改此项，而不会影响其他<li>。在jquery中执行此操作的最佳方法是什么？提前谢谢。

Answer 1

您应该使用padding:或margin:而忽略line-height。我假设你想在每个li之间保持一致的间距;改为使用保证金和填充。

Answer 2

使用普通的Javascript来测试每个li元素的字符串长度 - 请参阅this question - 并根据需要修改它（使用Javascript，JQuery或其他JS库）。

Answer 3

感谢你的建议，戴夫。我想我想通了。这就是我所做的：

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

基本上我正在查看每个<li>并将高度保存在变量中。如果<li>不是30px，则addClass'挤压'。 Prob不需要else语句，但我把它扔进了屎和咯咯笑。

谢谢大家

如何动态更改<li>样式而不影响其他</li> <li> s？</li>

3 个答案: