为集合中的每个元素设置CSS规则

Question

我有一个无序列表，其中包含1到3个列表项。这个无序列表(不幸的是)位于具有overflow: hidden的固定高度的div中。

<div id="container">
  <ul id="tweets">
    <li>
      Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit. Etiam est nisi, congue 
      id pulvinar eget.
    </li>
    <li>
      Donec nisi dolor, molestie quis varius 
      a, dictum vel nunc. Morbi odio lorem, 
      viverra eu semper eu.
    </li>
    <li>
      Mollis ac lorem. Aenean consequat 
      interdum mi, nec vestibulum metus mollis 
      non. Curabitur sed.
    </li>
  </ul>
</div>

如果有3个tweet，行高需要不超过1em才能完全适合容器。如果tweet少于三条，行高可以达到1.5em，以适应网站设计的其余部分。

我正在尝试做一些jQuery魔术来动态更新行高。

var tweet_len = $("#tweets > li").size();
if (tweet_len == 0) {
    // append a msg telling user there's no tweets
    // (this message looks like a tweet and has line-height: 1.5em)
} else if (tweet_len > 0 && tweet_len < 3) {
    $("#tweets li").each(function(){
        $(this).css("line-height: 1.5em");
    });
}

我尝试使用上面的代码(第6-8行)，但它不起作用。(我不认为我完全理解如何使用.each()。)

我应该在第6-8行使用什么代码将line-height更新为1.5em？

Answer 1

您必须向css方法传递2个参数：

$(this).css("line-height", "1.5em");

Answer 2

来自jquery API：

css( propertyName, value )

所以这应该是可行的

$(this).css("line-height", "1.5em");

Answer 3

当然，所有其他答案都是有效的，但请注意，您也可以简单地使用以下代码来设置CSS，而不需要手动迭代：

$("#tweets li").css("line-height", "1.5em");