CODEWITHSUNDEEP
javascriptjqueryhtmltextnextsibling
Jay Red Unadkat
Jay Red Unadkat

Reputation: 1

How to change text in "span" that is immediately after "i" using jquery?

I'm trying to change the text on a button in a plugin I am using using jquery. It's outer html is 

<button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour">
  <span class="ladda-label">
    <i class="ab-hour-icon">
      <span></span>
    </i>8:00 am
  </span>
</button>

It's inner html is 

<span class="ladda-label">
  <i class="ab-hour-icon">
    <span></span>
  </i>8:00 am
</span>

Anyone know how I'd change 8:00AM to 9-3AM?

Upvotes: 0

Views: 346

Answers (5)

ImBhavin95
ImBhavin95

Reputation: 1527

You have to add <span> in jquery code so your icon will remain

$(".ab-hour").html('<span class="ladda-label"><i class="ab-hour-icon"><span></span></i>9-3AM</span>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour">
<span class="ladda-label">
<i class="ab-hour-icon">
</i>8:00 am</span>
</button>

Upvotes: 0

Salman
Salman

Reputation: 389

Try this

$(".ladda-label").html("<i class=\"ab-hour-icon\"></i>9-3 am");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour">
<span class="ladda-label">
<i class="ab-hour-icon">
</i>8:00 am</span>
</button>

Upvotes: 0

Mohammad
Mohammad

Reputation: 21489

You can use javascript Node.nextSibling that contain immediately text after element.

$(".ab-hour .ab-hour-icon")[0].nextSibling.nodeValue = "9-3AM";


$(".ab-hour .ab-hour-icon")[0].nextSibling.nodeValue = "9-3AM";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour"><span class="ladda-label"><i class="ab-hour-icon"><span></span></i>8:00 am</span></button>

Also you use only javascript

document.querySelector(".ab-hour .ab-hour-icon").nextSibling.nodeValue = "9-3AM";

Upvotes: 1

Gus de Boer
Gus de Boer

Reputation: 401

I would do it like this

$( ".ab-hour span" ).html('9-3AM');

It would be best to change the inner HTML so the span can directly be changed. If that is not an option you could use

$( ".ab-hour span" ).html('<i class="ab-hour-icon"><span></span></i>9-3AM');

Upvotes: 0

pascal zoet
pascal zoet

Reputation: 172

Do you mean this?

$( "yourbutton" ).html('yourtext');

Upvotes: 0

Related Questions