Einstellen von CSS-Regeln für jedes Element in einem Satz

Question

Ich habe eine ungeordnete Liste mit zwischen 1 und 3 Listenelementen. Die ungeordnete Liste ist (leider) innerhalb einer festen Höhe div mit overflow: hidden.

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

Wenn es 3 Tweets, die line-height braucht nicht mehr als 1em sein, um vollständig fit in den Behälter. Wenn es weniger als drei Tweets gibt, kann die Zeilenhöhe bis zu 1.5em betragen, um mit dem Rest des Website-Designs übereinzustimmen.

Ich versuche, einige jQuery Magie zu tun, um die Zeilenhöhe dynamisch zu aktualisieren.

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"); 
    }); 
} 

Ich habe versucht, den Code oben (Zeilen 6-8), aber es funktioniert nicht. (Ich glaube nicht, dass ich vollständig verstehe, wie man .each().)

Welchen Code soll ich in den Zeilen 6-8 verwenden, um die Zeilenhöhe auf 1.5em zu aktualisieren?

Answer 1

müssen Sie 2 params an die CSS-Methode übergeben:

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

Answer 2

Von jquery API:

css(propertyName, value)

so sollte dies alles andere

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

Answer 3

arbeiten Antworten sind natürlich gültig, aber beachten Sie, dass Sie können auch einfach den folgenden Code verwenden, um die CSS zu setzen, ohne Iterieren manuell:

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

Answer 4

Keine Notwendigkeit, in js zu tun, was Sie mit CSS tun können (bei weitem effizienter)

css :

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

Beachten Sie, dass die Zeilenhöhe auf den UL (nicht die LIs) angewendet wird, da es vererbt wird. Stellen Sie sicher, dass Sie alle Regeln entfernen, die explizit die Zeilenhöhe für LIs festlegen. Wenn Sie nicht, können Sie die LI oben Ziel haben:

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

nun die dünne js Teil:

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'); 
} 

wenn dies "live" Code (zB wenn Polling mit setInterval () oder innerhalb von live() - oder delegate() -Rückrufen) und die Anzahl der Zeilen kann abnehmen, müssen Sie die hinzugefügte Klasse explizit entfernen: