jquery color coding

Question

I have some part numbers as a string.For example : partnumber = "a1;a2;a3"

Now I am displaying it using text() function like

$("#id").text("Part number(s) " + partnumber+ " is shown");

But I want to change the color of partnumber only and not the full text.

So I should get something like this :

Part number(s) (some color) a1;a2;a3 (some color) is shown. How to do this using jquery?

JJJ · Accepted Answer · 2012-04-19 11:18:41Z

2

You have to wrap it in a span and use a class to define the extra styling:

$("#id").html('Part number(s) <span class="your_color_classname">' + partnumber+ '</span> is shown');

You have to use html() instead of text() because you are inserting html not plain text.

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

answered Apr 19, 2012 at 11:15

kugta

612 bronze badges

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

Comments

Sergi Papaseit · Accepted Answer · 2012-04-19 11:14:23Z

0

You'll need to change your html a bit:

<div id="id">Part number(s) <span id="partnumbers"></span> is shown</div>

And then in jquery:

$("#partnumbers").html(partnumber);

This way you can style #partnumbers and #id separately through Css

answered Apr 19, 2012 at 11:14

Sergi Papaseit

16.2k16 gold badges71 silver badges103 bronze badges

Hiren H Patel · Accepted Answer · 2012-04-19 11:33:20Z

0

$("#partnumbers").html("Part number(s) <span style='color:red'>" +partnumber+ "</span> is shown");

answered Apr 19, 2012 at 11:33

Hiren H Patel

1673 silver badges12 bronze badges