CODEWITHSUNDEEP
javascriptjqueryhtmlcss
WNRosenberg
WNRosenberg

Reputation: 1892

Setting CSS rules for every element in a set

I've got an unordered list with between 1 and 3 list items in it. The unordered list is (unfortunately) inside of a fixed-height div with 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>

If there are 3 tweets, the line-height needs to be no more than 1em to completely fit in the container. If there are less than three tweets, the line-height can be up to 1.5em to fit with the rest of the site's design.

I'm trying to do some jQuery magic to update the line-height dynamically.

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

I tried using the code above (lines 6-8) but it's not working. (I don't think I fully have an understanding of how to use .each().)

What code should I use on lines 6-8 to update the line-height to 1.5em?

Upvotes: 2

Views: 159

Answers (4)

Pablo Ziliani
Pablo Ziliani

Reputation: 11

No need to do in js what you can do with css (by far more efficiently)

css:

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

Note that the line-height is applied to the UL (not the LIs) because it is inherited. Make sure to remove any rule explicitly setting the line-height on LIs. If you can't, you may have to target the LI's above:

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

Now, the thin js part:

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 this was "live" code (e.g. if polling with setInterval() or inside live() or delegate() callbacks) and the number of rows can diminish, you'll have to explicitly remove the added class:

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

Upvotes: 0

Julien Lebosquain
Julien Lebosquain

Reputation: 41213

All other answers are of course valid, but note that you can also simply use the following code to set the CSS, without iterating manually:

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

Upvotes: 2

Mark Baijens
Mark Baijens

Reputation: 13222

From jquery API:

css( propertyName, value )

so this should work

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

Upvotes: 2

stecb
stecb

Reputation: 14746

you have to pass 2 params to the css method:

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

Upvotes: 1

Related Questions