Setting CSS rules for every element in a set

Question

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?

Mark Baijens · Accepted Answer · 2010-12-09 23:01:41Z

2

From jquery API:

css( propertyName, value )

so this should work

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

answered Dec 9, 2010 at 23:01

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Julien Lebosquain · Accepted Answer · 2010-12-09 23:03:33Z

2

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

answered Dec 9, 2010 at 23:03

Julien Lebosquain

41.4k9 gold badges108 silver badges120 bronze badges

1 Comment

WNRosenberg Over a year ago

This is what I was trying to do at first, but I was trying to use one param instead two (not realizing that was the problem).

stecb · Accepted Answer · 2010-12-09 23:01:39Z

1

you have to pass 2 params to the css method:

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

answered Dec 9, 2010 at 23:01

stecb

14.8k3 gold badges53 silver badges69 bronze badges

1 Comment

WNRosenberg Over a year ago

You were the first to comment by a fraction of a second. Congrats!

Pablo Ziliani · Accepted Answer · 2010-12-10 00:48:38Z

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

Collectives™ on Stack Overflow

Setting CSS rules for every element in a set

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related