在不删除 HTML 的情况下编辑文本

Edit text without removing HTML

本文关键字：情况下 编辑 文本 HTML 删除      更新时间：2023-09-26

我试图隐藏文本"33可用"，数字随着购买门票而变化。我无法直接编辑文本。

<table width="100%" cellspacing="0" cellpadding="2" border="0" style="">
  <tbody>
   <tr bgcolor="#eeeeee">
     <td colspan="2">
        <input type="hidden" value="90" name="fees">
        <input type="hidden" value="1992261" name="feeID">
        <input type="hidden" value="Shirt,X-Small, Small, Medium, Large, X-Large, R" name="shirtSizeArray">
        <input type="hidden" value="0" name="setdiscountflag">
        <b>Runner</b>: $90.00<br>Run on the Upper Valley Haven's Covered Bridges Half Marathon team!<br>33 available
        <input type="hidden" value="Shirt,X-Small, Small, Medium, Large, X-Large, R" name="shirtsize1992261"><input type="hidden" value="" name="setGoalAmt">
     </td>
   </tr>
  </tbody>
</table>

我尝试了以下内容，但这将删除其他 html 信息：

$('form#registrationForm table tbody tr td table tbody tr td table tbody tr td table tbody tr   td:contains("Run on the Upper")').html('<b>Runner:</b> $90.00<br />Run on the Uper Valley Haven''s Covered Bridges Half Marathon team!');

我也尝试使用 .text，选择 33 个可用并仅隐藏该行的最佳方法是什么？

这是其中 HTML 的小提琴 http://jsfiddle.net/jelane20/76ebL7ko/1/

提前谢谢你！

将

文本包装在标签中，这将使操作变得容易得多， 

$($('td br:last')[0].nextSibling).wrap('<span id="avail">');

然后用$('#avail')操纵

http://jsfiddle.net/76ebL7ko/3/

一个简单的选择是用<span>标签将"33 可用"括起来，如下所示：

<span id='available'>33 available</span>

编辑：您可以使用以下代码执行此操作：

$('td').contents().filter(function() 
{
    return this.nodeType==3 && this.nodeValue.trim();
}).last().wrap('<span id="available">');

这是获取具有非空格字符的最后一个文本节点并将其包装在一个范围中。现在，您可以仅访问该文本并将其隐藏：

$('#available').hide();
相关文章：