Apply different styles to parts of the same element using jQuery

Question

Consider this element:

Count Dracula: Bleh bleh bleh

I need to split the text in a way that the bit before (and including) the colon has one style (say, bold and red) and the rest has another (say, black and italics).

I am trying to do this using JQuery and here's my attempt:

$("vi").each(function(){
   var temp = $(this).text();
   temp = temp.split(':');
   temp[0] = "<strong>" + temp[0].trim() + "</strong>";
   temp[1] = "<em>" + temp[1].trim() + "</em>";
   temp = temp.join("");
   $(this).text(temp);
});

vi {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<body>
<vi>Dracula: bleh bleh bleh</vi>
</body>
</html>

Any idea why this wouldn't work? When I try running it, it just outputs the text along with the tags I added as is, i.e. it displays "" instead of applying it, and so on.

Wrap respective parts of text with <span> tags. Don't make it too hard. — Mikel
– Mikel, Commented Dec 6, 2015 at 12:13

George · Accepted Answer · 2015-12-06 12:24:28Z

1

You need .html(), not .text(), since you are inserting HTML into an element:

$("vi").each(function(){
   var temp = $(this).text();
   temp = temp.split(':');
   temp[0] = "<strong>" + temp[0].trim() + "</strong>";
   temp[1] = "<em>" + temp[1].trim() + "</em>";
   temp = temp.join("");
   $(this).html(temp);
});

Also, if I'm understanding the description of what you want, your CSS style should be:

vi strong {
  color: red;
}

Note: vi is not a valid HTML element - but you probably already knew that.

$("vi").each(function(){
   var temp = $(this).text();
   temp = temp.split(':');
   temp[0] = "<strong>" + temp[0].trim() + "</strong>";
   temp[1] = "<em>" + temp[1].trim() + "</em>";
   temp = temp.join(": ");
   $(this).html(temp);
});

vi strong {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<vi>Dracula: bleh bleh bleh</vi>

edited Dec 6, 2015 at 12:24

answered Dec 6, 2015 at 12:15

George

36.9k9 gold badges70 silver badges109 bronze badges

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

Comments

Kishore Sahasranaman · Accepted Answer · 2015-12-06 12:18:40Z

1

Set html() to the element. Read http://api.jquery.com/html

$("vi").each(function(){
   var temp = $(this).text();
   temp = temp.split(':');
   temp[0] = "<strong>" + temp[0].trim() + "</strong>";
   temp[1] = "<em>" + temp[1].trim() + "</em>";
   temp = temp.join(": ");
   $(this).html(temp);
});

vi {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<body>
<vi>Dracula: bleh bleh bleh</vi>
</body>
</html>

answered Dec 6, 2015 at 12:18

Kishore Sahasranaman

4,2504 gold badges27 silver badges52 bronze badges

Comments

dfsq · Accepted Answer · 2015-12-06 12:20:07Z

1

You need to use $.fn.html method. It is convenient to use it with a function parameter, it will run each loop internally for you:

$("vi").html(function(_, text) {
    text = text.split(':');
    return "<strong>" + text[0].trim() + "</strong> <em>" + text[1].trim() + "</em>";
});

vi {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<vi>Dracula: bleh bleh bleh</vi>

answered Dec 6, 2015 at 12:20

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Apply different styles to parts of the same element using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related