如何使用jquery更改“i”之后的“span”中的文本？答案

【问题标题】：How to change text in "span" that is immediately after "i" using jquery?如何使用jquery更改“i”之后的“span”中的文本？
【发布时间】：2017-02-24 12:44:04
【问题描述】：

我正在尝试使用 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 吗？

【问题讨论】：

请提供html和jquery代码
嗨，布伦特，我编辑了要显示的初始帖子，感谢您的快速回复
$("#ButtonName").text("The new text");
这种情况下的按钮名称是什么？我对 jquery 很陌生

标签： javascript jquery html text nextsibling

【解决方案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";

【讨论】：

【解决方案2】：

你是这个意思吗？

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

【讨论】：

【解决方案3】：

我会这样做

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

最好更改内部 HTML，以便可以直接更改跨度。如果这不是您可以使用的选项

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

【讨论】：

Gus，感谢您的快速回复。我指的按钮在这里：lapelsdrycleaners.co.uk/order-online 选择任何项目并单击下一步后。我正在使用前端全局 javascript 编辑器 - 有什么想法吗？

【解决方案4】：

试试这个

$(".ladda-label").html("&lt;i class=\"ab-hour-icon\"&gt;&lt;/i&gt;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>

【讨论】：

不，没用，添加到后端的自定义 js 中，但没有变化。我指的按钮在这个链接上：lapelsdrycleaners.co.uk/order-online 在选择西装时，2 件套行政，它带来了一个有很多按钮的页面。我正在尝试更改上午 8 点的文本，并将其应用于所有其余部分。感谢您的快速回复 Sallu！

【解决方案5】：

您必须在 jquery 代码中添加<span>，这样您的图标才会保留

$(".ab-hour").html('&lt;span class="ladda-label"&gt;&lt;i class="ab-hour-icon"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;9-3AM&lt;/span&gt;');

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

【讨论】：

Bhavin，我在 x 主题上使用编辑全局 javascript 功能，这有关系吗？我正在推荐的按钮在此链接上：lapelsdrycleaners.co.uk/Order-online在选择套件时，2件式高管，它带来了许多按钮的页面。我正在尝试更改上午 8 点的文本，并将其应用于所有其余部分。谢谢朋友
我可以在页脚中看到按钮，您可以告诉我这个吗？