JS根据字符数更改CSS行高

Question

我有一个通过 JavaScript 在页面加载时动态生成的 ul 列表。 生成的代码可以在这里看到（删除了不相关的项目）：

<ul class="tweet_list"><li class="tweet_first tweet_odd"></li></ul>

CSS：

​ul.tweet_list li {
    height: 55px;
    line-height: 55px;
    overflow: hidden;
    padding: 0.5em !important;
    vertical-align:middle;
}​

我正在尝试根据推文中的字数更改 CSS line-height 属性（如果超过 9 个字，我希望行高从 55 像素更改为 24 像素）。这是我的 JS：

$(function(){
    var $tweet = $(".tweet_first");
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css("line-height", "55px");
    }
    else {
        $tweet.css("line-height", "24px");
    }    
});

这是小部件http://justpaste.it/twitter-widget的截图

编辑：我的代码不起作用。出于某种原因，除非我进入我的 styles.css 文件并实际更改行高，否则我上面的任何内容都不会动态更改行高。如何在我的 JS 中调用 ul.tweet_list li 并将 line-height 属性直接应用于它？

更新：如果有人能告诉我如何动态更改 CSS 部分，我可以弄清楚如何检测推文中的字符数。那么，使用 Javascript，我该如何更改：

​ul.tweet_list li {line-height: 55px; }​

到这里：

​ul.tweet_list li {line-height: 24px; }​

更新 2： 调用推文的代码：

jQuery(function($){
      $(".tweeter_widget").tweet({
        join_text: "auto",
        username: "twitter_username",
        avatar_size: null,
        count: 1,
        auto_join_text_default: "",
        auto_join_text_ed: "",
        auto_join_text_ing: "",
        auto_join_text_reply: "",
        auto_join_text_url: "",
        loading_text: "loading tweets..."
      });
    }); 

Answer 1

我认为应该是：

$(function(){
    var $tweet = $(".tweet_first");
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css({ "font-size": "55px", "line-height": "55px" });
    }
    else {
        $tweet.css({ "font-size": "24px", "line-height": "24px" });
    }    
});

更新：好的，也许我明白了：

查看您使用过的插件的文档，我发现您可以绑定一个事件处理程序，如“已加载”，它会在推文呈现后触发。所以你必须改变你的代码：

jQuery(function($){
  $(".tweeter_widget").tweet({
    join_text: "auto",
    username: "twitter_username",
    avatar_size: null,
    count: 1,
    auto_join_text_default: "",
    auto_join_text_ed: "",
    auto_join_text_ing: "",
    auto_join_text_reply: "",
    auto_join_text_url: "",
    loading_text: "loading tweets..."
  }).bind("loaded", function() {
    var $tweet = $(".tweet_first"); // maybe using  $(this)  is better
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css({ "font-size": "55px", "line-height": "55px" });
    }
    else {
        $tweet.css({ "font-size": "24px", "line-height": "24px" });
    }
  });
});

请尝试，未测试:)

Answer 2

您正在更改代码中的font-size，这可能是第一个问题，因此请更改：

    $tweet.css("font-size", ...

到

    $tweet.css("line-height", ...

好吧，除了你的代码看起来还不错，所以我会尝试：

....
var $tweet = $(".tweet_first");
var $numWords = $tweet.text().split(" ").length;
alert("num of words: " + $numWords);  // make sure you are getting a value
alert("# of .tweet_first els: " + $tweet.length);  // make sure you have an element to change
...