使用jQuery围绕表中已存在的文本包装SPAN标记

时间:2012-09-17 11:16:32

标签: javascript jquery

我想在我的表格中已经存在的文本(如下所示)周围加一个span标记。

要包装在span标记中的文字:

Build Muscle and Train Harder<br> &nbsp; Boost Energy without the
Calories<br> &nbsp;  Promote Nitric Oxide Production

我的HTML:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr> 
            <td>Build Muscle and Train Harder<br> &nbsp;Boost Energy without the Calories<br> &nbsp; Promote Nitric Oxide Production<br><br>
                <table cellspacing="0" cellpadding="0" border="0" id="tttt">
                    <tbody>
                        <tr>
                            <td><b><font class="pricecolor colors_productprice"><span class="PageText_L483n"><h3><b style="font-size:13px"><span class="saleprice"><font class="text colors_text"><b><span class="PageText_L335n">Sale Price</span>: </b></font></span> <b class="prodPrOr">$34.05 </b></b></h3></span></font></b><br><a class="pricecolor colors_productprice" href="/ShoppingCart.asp?ProductCode=amino%2Dchewables"><b><span class="PageText_L655n"><img class="AddRight" src="/v/vspfiles/assets/images/addtocartsmall.gif"></span></b></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br><br>
                <a onclick="window.open('/help_FreeShipping.asp', 'FreeShipping', 'scrollbars,status,resizable,width=300,height=300');" href="javascript:void(0);">
                <img border="0" alt="" src="/v/vspfiles/templates/2007New/images/Icon_FreeShipping.gif" class="vCSS_img_icon_free_shipping"></a>
            </td>
            <td valign="top" align="right" id="v65-productdetail-action-wrapper" class="v65-productdetail-options">
                <div id="contact">
                    <img src="/v/vspfiles/assets/images/osw0001_talk_button.jpg">
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <ul></ul>
            </td>
        </tr>
    </tbody>
</table>

1 个答案:

答案 0 :(得分:1)

您应该在您尝试选择的td中添加一个类或ID,以使其更简单。例如。如果你做到了:

<td class="myText">Build ... </td>

现在您可以轻松选择它(但如果您因某些原因无法添加该类,那么可以采用最简单的方法),imho。

    $('.myText').html().replace($('.myText').html().match(/^.*/), '<span class="myClass">'+$('.myText').html().match(/^.*/)+'</span>');