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

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

如果有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行上面的代码，但它不起作用。我不认为我完全理解如何使用。每一个

---

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

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

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

从jquery API：

所以这应该行得通

---

$this.cssline-height，1.5em

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

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

---

无需在js中使用css就能更有效地使用它

css:

请注意，行高度应用于UL而不是LIs，因为它是继承的。 确保删除在LIs上显式设置行高的任何规则。如果不能，您可能必须针对上述LI：

#tweets li {line-height: 1.5}
#tweets.long-list li {line-height: 1}

现在，瘦js部分：

var $tweets = $("#tweets"),  // save for reuse
    tweet_len = $tweets.children().size();


if (!tweet_len) {
    // append a msg telling user there's no tweets
} else if (tweet_len > 3) {
    // only case where you actually need to change things
    // we do that without traversing the dom and touching it only once
    $tweets.addClass('long-list');
}

如果这是实时代码，例如，如果使用setInterval或内部实时或委托回调进行轮询，并且行数会减少，则必须显式删除添加的类：

if (tweet_len > 3) {
    $tweets.addClass('long-list');
} else {
    $tweets.removeClass('long-list');
    if (!tweet_len) {
        // append a msg telling user there's no tweets
    }
}

---

你是第一个以几分之一秒的速度发表评论的人。恭喜！这是我一开始尝试做的，但我尝试使用一个参数，而不是两个参数，但我没有意识到这是问题所在。

var $tweets = $("#tweets"),  // save for reuse
    tweet_len = $tweets.children().size();


if (!tweet_len) {
    // append a msg telling user there's no tweets
} else if (tweet_len > 3) {
    // only case where you actually need to change things
    // we do that without traversing the dom and touching it only once
    $tweets.addClass('long-list');
}

if (tweet_len > 3) {
    $tweets.addClass('long-list');
} else {
    $tweets.removeClass('long-list');
    if (!tweet_len) {
        // append a msg telling user there's no tweets
    }
}