如何使用jquery更改緊接在“ i”之后的“ span”中的文本？

Question

我正在嘗試使用jquery更改插件中按鈕上的文本。 它的外部html是

<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>

它的內部html是

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

有人知道我將8:00AM更改為9-3AM嗎？

Answer 1

您可以使用javascript Node.nextSibling ，它在元素之后立即包含文本。

$(".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> 

您也只使用javascript

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

Answer 2

你是這個意思嗎

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

Answer 3

嘗試這個

 $(".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> 

Answer 4

我會這樣

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

最好更改內部HTML，以便可以直接更改范圍。 如果不是這樣，您可以使用

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

Answer 5

您必須在jquery代碼中添加<span> ，以便圖標保持不變

 $(".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>