Set text in between

Question

I have this range

<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 span text as << instead of the current Prev text.

I tried this below, but it did not change the text as I expected. How can I do that?

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

Answer 1

Use .text() instead and change your selector:

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

- VIEW DEMO -

Answer 2

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

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

or

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

or

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

Answer 3

You need to fix your selector. Although CSS syntax requires the separation of several classes, selector syntax requires that they be directly concatenated and with a dot prefix:

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

or better:

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

Answer 4

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

Answer 5

Give an identifier to your range, and then change the text of the target range.

 $("#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, the text “Error” will become “Info” and their font icons will also be changed.

Answer 6

Give it a try. First, he will look for an anchor tag that contains a span with the class "ui-icon-circle-triangle-w", after which he sets the span text to "<<".

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