Question

我正在尝试将该页面上包含#OFN#的所有链接中的前5个字母替换为链接的前5个字母中的图像以替换#OFN#文本，但希望保留其余的链接文本。

这是我到目前为止所使用的......

$(document).ready(function() {
    $("a:contains('#OFN#')").each(function() {
        var calSubject = $(this).text().substring(5);
        $(this).replaceWith("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />" + calSubject);
    });
});

但是这种方法完全从文本中删除了<a> tag。如何在不删除<a> tags

的情况下执行此操作

以下是链接的示例HTML：

<a href="#" onclick="eventDisplay('980','4/18/2013')">#OFN# 2013 Midwest Regional Meeting</a>

我尝试使用.children()，但这似乎也不起作用。我在这里做错了什么？

Answer 1

使用html代替replaceWith。看看这个小提琴：

http://jsfiddle.net/lbstr/MPTp7/

replaceWith将替换它所调用的元素，这解释了您描述的行为。使用$.fn.html，您将替换锚标记内内的所有内容。

Answer 2

使用html方法将代码放在链接中而不是替换它：

$(this).html("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />" + calSubject);

Answer 3

选择文本节点并改为更新它们。 jsFiddle Demo

$(document).ready(function() {
    $("a:contains('#OFN#')").contents().each(function(){
        // skip if not a text node
        if (this.nodeType != 3) {
            return true;
        }
        this.nodeValue = this.nodeValue.substr(5);
        $(this).before("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />");
    });
});

Answer 4

我会做一些稍微冗长的事情：

var regex = /^#0FN#/;
$("a").each(function() {
    var $this = $(this), html = $this.html();
    if (regex.test(html)) {
        html.replace(/#0FN#/, "image stuff");
        $this.html(html);
    }
});

Answer 5

这看起来更清楚：

<a href="#" class="ofn" onclick="eventDisplay('980','4/18/2013')">
    <span>2013 Midwest Regional Meeting</span>
</a>

并且

$(document).ready(function() {
    $('a.ofn').prepend('<img class="icon" src="/images/ofn_bullet.gif" />');
});

和

a.ofn .icon {
   width: 10px;
   height: 10px;
   border: none; /* Actually i think you mean outline rather than border */
}

除非你必须按照某些原因这样做，否则我们不会这样做。

如果eventDisplay的参数始终相同，您也可以将on标签从a标签移动到javascript。

jQuery - 替换链接中的部分文本

5 个答案: