75

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('<<');
p.campbell
  • 98,673
  • 67
  • 256
  • 322
Ayman Hussein
  • 3,817
  • 7
  • 28
  • 48
  • i guess it wont work because u need to pass ASCII code for that which is « try it i think its gonna work. – Dipesh Parmar Nov 21 '12 at 12:15
  • Possible duplicate of [how to set a value for a span using JQuery](http://stackoverflow.com/questions/1491743/how-to-set-a-value-for-a-span-using-jquery) – Stewart Apr 01 '17 at 15:47

6 Answers6

144

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

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

-- VIEW DEMO --

Curtis
  • 101,612
  • 66
  • 270
  • 352
13

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("<<");
VisioN
  • 143,310
  • 32
  • 282
  • 281
  • hmmm.. dont think this will work, because it will try to interpret the `<<` as html, no? – musefan Nov 21 '12 at 12:14
  • 1
    @musefan No. It **will** work. There is no need in `text()` method. – VisioN Nov 21 '12 at 12:15
  • 1
    @VisioN This is only because in this instance it won't parse as HTML. I think if we're dealing with text content, `text` should be used. What if the user wanted `` displayed, then this would be interpreted as HTML – Curtis Nov 21 '12 at 12:18
  • @Curt `` has a closing `>` bracket, hence browser will make a tag out of it. Otherwise, `<<` or `>>` will be interpreted it correctly. – VisioN Nov 21 '12 at 12:19
  • @VisioN Why `html()` instead of `text()` though? I don't see a benefit, only a potential flaw. OP changes the content to `` at a later date, now they have to change the method being used to output the string. Why wasn't the correct method used in the first place. – Curtis Nov 21 '12 at 12:21
5

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(...);
Alnitak
  • 334,560
  • 70
  • 407
  • 495
4
$('.ui-icon-circle-triangle-w').text('<<');
Anton
  • 32,245
  • 5
  • 44
  • 54
3

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('<<');
Aamir
  • 2,173
  • 1
  • 29
  • 58
  • Add some explanation with answer for how this answer help OP in fixing current issue – ρяσѕρєя K Jan 14 '16 at 10:25
  • Yeah sure....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 "<<". I hope you understand now...:) – Aamir Jan 14 '16 at 10:44
  • Yes edit this in Answer which make your answer more help because just posting a code snippet is not right way to answer any question.Thanks – ρяσѕρєя K Jan 14 '16 at 10:46
2

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.

freewill
  • 1,111
  • 1
  • 10
  • 23