Making text bold in jQuery

Question

I'm currently having a problem replacing the current text with the same text but in bold. I've tried the following

var valueInRow = $(value).closest(".label.imaged").text();
var result = valueInRow.bold();
$(value).closest(".label.imaged").text().replaceWith(result);

But I'm not sure why it doesn't work; Any ideas?

If you want to replace, like a `` tag with a `` tag, this might help: http://stackoverflow.com/a/3435890/4796321 — Sainan, Nov 11 '16 at 12:04

score 3 · Accepted Answer · answered Nov 11 '16 at 12:00

3

You can clearly use .wrapInner():

Wrap an HTML structure around the content of each element in the set of matched elements.

$(value).closest(".label.imaged").wrapInner("<strong />");

answered Nov 11 '16 at 12:00

Praveen Kumar Purushothaman

164,888
24
203
252

Surely setting CSS is preferable to the `strong` element. – DBS Nov 11 '16 at 12:01
@DBS Agreed. `:)` But some people (like me) hate inline styles and obtrusive code. Agree? – Praveen Kumar Purushothaman Nov 11 '16 at 12:01
1

@PraveenKumar - Follow you and many things learned from you Thanks – Sudharsan S Nov 11 '16 at 12:03

Sudharsan S · Answer 2 · 2016-11-11T12:23:09.493

3

Use .css() method also

var valueInRow= $(value).closest(".label.imaged");
valueInRow.css('font-weight', 'bold');

edited Nov 11 '16 at 12:23

answered Nov 11 '16 at 12:00

Sudharsan S

15,336
3
31
49

score 1 · Answer 3 · answered Nov 11 '16 at 12:18

The existing answers are entirely valid, but I'll add this an alternative that doesn't add any new HTML elements or inline styles.

Creating a CSS rule that's purpose is simply to bold text, such as:

.boldText{ font-weight: bold !important; }

Will then allow you to bold any element simply by adding that class:

$(value).closest(".label.imaged").addClass("boldText");

*Note about the use of !important: This is usually not recommended CSS as it's often used in the wrong way. However in this case if you add a class called boldText to an element, chances are, you will always want it to have bold text.

Making text bold in jQuery

3 Answers3