如何使用jquery更改具有嵌入图像的锚文本?

时间:2012-02-14 20:23:37

标签: jquery

标题总结了它。

示例锚:

<a href="/xxx/yyy/zzz/2977088462?idx=2.3" data-folderid="2977088462" title="ATLAS TEST Share" class=""><img style="border-style: none" alt="ATLAS TEST Share" title="Shared by me." src="/Content/icons/folder_user.png">&nbsp;ATLAS TEST Share</a>


            var navItem = $("#favorite-products [title='" + cachedFolderText + "']");
            navItem.attr("title", FolderDescription); // this works
            navItem.text('&nbsp;'+FolderDescription); // this changes the text but also remove the image from the object.

我发现的是图像被删除并替换为文本,是否有一些我缺少的东西来保存图像并只是更改文本?

基于James Montagne代码的结果

<a href="/Buyer/Favorite/FavSummary/2976199074?idx=2.2" data-folderid="2976199074" title="ABC Finally4" class="">
                            <img style="border-style: none" alt="Normal Folder" title="Not shared" src="/Content/icons/folder.png">ABC Finally 
                        ABC Finally4</a>

2 个答案:

答案 0 :(得分:2)

您可以使用contents获取包含文本节点的内容。然后,您可以只替换文本节点。

这是一个示例或替换第一个文本节点:

http://jsfiddle.net/8LMZn/1/

$("a").contents().filter(function() {
        return this.nodeType == 3;
}).eq(0).replaceWith("NEW TEXT");

UPDATE :这将替换第一个非空白文本节点。

http://jsfiddle.net/8LMZn/4/

$("a").contents().filter(function() {
    return this.nodeType == 3 && $.trim(this.nodeValue).length > 0;
}).eq(0).replaceWith("NEW TEXT");

理想情况下,您应该将文本包装在span或其他容器中,以便于访问。

答案 1 :(得分:0)

您可以尝试这样做:

navItem.html(navItem.html()+'&nbsp;'+FolderDescription);