CODEWITHSUNDEEP
jquery
Ayman Hussein
Ayman Hussein

Reputation: 3857

Set the text in a span

I have this span

<a title="Prev" data-event="click" 
   data-handler="prev" class="ui-datepicker-prev   ui-corner-all">
     <span class="ui-icon ui-icon-circle-triangle-w">Prev</span>
</a>

I need to set the text of the span to be << instead of its current text Prev.

I tried this below, but it didn't change the text as I'd expected. How can this be done?

 $(".ui-icon .ui-icon-circle-triangle-w").html('<<');

Upvotes: 75

Views: 257203

Answers (6)

Aamir
Aamir

Reputation: 2283

Try it.. It will first look for anchor tag that contain span with class "ui-icon-circle-triangle-w", then it set the text of span to "<<". 

$('a span.ui-icon-circle-triangle-w').text('<<');

Upvotes: 3

freewill
freewill

Reputation: 1171

Give an ID to your span and then change the text of target span.

$("#StatusTitle").text("Info");
$("#StatusTitleIcon").removeClass("fa-exclamation").addClass("fa-info-circle"); 

<i id="StatusTitleIcon" class="fa fa-exclamation fa-fw"></i>
<span id="StatusTitle">Error</span>

Here "Error" text will become "Info" and their fontawesome icons will be changed as well.

Upvotes: 2

Alnitak
Alnitak

Reputation: 339786

You need to fix your selector. Although CSS syntax requires multiple classes to be space separated, selector syntax would require them to be directly concatenated, and dot prefixed:

$(".ui-icon.ui-icon-circle-triangle-w").text(...);

or better:

$(".ui-datepicker-prev > span").text(...);

Upvotes: 5

Anton
Anton

Reputation: 32581

$('.ui-icon-circle-triangle-w').text('<<');

Upvotes: 4

Curtis
Curtis

Reputation: 103348

Use .text() instead, and change your selector:

$(".ui-datepicker-prev .ui-icon.ui-icon-circle-triangle-w").text('<<');

-- VIEW DEMO --

Upvotes: 144

VisioN
VisioN

Reputation: 145368

This is because you have wrong selector. According to your markup, .ui-icon and .ui-icon-circle-triangle-w" should point to the same <span> element. So you should use:

$(".ui-icon.ui-icon-circle-triangle-w").html("<<");

or

$(".ui-datepicker-prev .ui-icon").html("<<");

or

$(".ui-datepicker-prev span").html("<<");

Upvotes: 13

Related Questions