Combine .text() and .css() method in jQuery

Question

I'd like to use a single method in jQuery to set both text colour and text itself, as in the hypothetical / failing method:

$("#north_america_stat").css({
    color : northAmericaColour,
    text: northAmerica
});

The "text: northAmerica" is not working.

I understand it's possible to set them individually like this:

$("#north_america_stat").text(northAmerica);

then:

$("#north_america_stat").css({
    color : northAmericaColour, 
 });

but in the interest of tight code I'd like to combine the methods into one - is this possible?

What's wrong with just chaining them? $('#north_america_stat').css({color: northAmericaColour}).text(northAmerica); ? — Two-Bit Alchemist
– Two-Bit Alchemist, Commented Mar 19, 2014 at 21:40
text is not a css property, so I'm not sure why you're trying to do this. Use method chaining instead. — user1726343
– user1726343, Commented Mar 19, 2014 at 21:41

mehmetseckin · Accepted Answer · 2014-03-19 21:43:36Z

5

One way is chaining them.

$('#north_america_stat')
          .css({color: northAmericaColour}) 
          .text(northAmerica);

Another way is using CSS content property.

$("#north_america_stat").css({
    color : northAmericaColour,
    "content": northAmerica
});

answered Mar 19, 2014 at 21:43

mehmetseckin

3,1371 gold badge34 silver badges44 bronze badges

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

Comments

Two-Bit Alchemist · Accepted Answer · 2014-03-19 21:42:19Z

3

There is not a CSS property called text.

If you want to use two methods on the same element in jQuery most of the time you can just chain method calls, like so:

$('#north_america_stat').css({color: northAmericaColour}).text(northAmerica);

This can also be done over multiple lines for readability:

$('#north_america_stat')
    .css({color: northAmericaColour})
    .text(northAmerica);

answered Mar 19, 2014 at 21:42

Two-Bit Alchemist

18.6k6 gold badges52 silver badges85 bronze badges

2 Comments

mehmetseckin Over a year ago

"text" also does not exist.

Aquaphor Over a year ago

@mehmetseckin you can't currently chain css() and text() from what I know. For any given JQuery function, as long as it returns JQuery it can be chained. If it returns string, it cannot be chained (nothing after it can be chained)

user400654 · Accepted Answer · 2014-03-19 21:46:33Z

2

No such function exists yet, however, you can create one:

$.fn.colorAndText = function (options) {
    this.css("color", options.color || "black");
    this.text(options.text || "");
};

$("#foo").colorAndText({
    color: "green",
    text: "foobar"
});

http://jsfiddle.net/YR4pM/

Note however that this is no more efficient or any easier to maintain than simply using .css and .text separately.

answered Mar 19, 2014 at 21:46

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Comments

Bergi · Accepted Answer · 2014-03-19 21:52:51Z

2

If you really need to create your own single call method - you can create a plugin function, e.g.

$.fn.colorText = function(color, text) {
    return this.css( "color", color ).text(text);
};

Then you can do something like

$('#north_america_stat').colorText('green','USA');

Demo: http://jsfiddle.net/qW83Q/

But this doesn't give you much advantage over normal chaining.

edited Mar 19, 2014 at 21:52

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Mar 19, 2014 at 21:47

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Collectives™ on Stack Overflow

Combine .text() and .css() method in jQuery

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related