0

我正在尝试用图像替换该页面上包含链接前 5 个字母的所有链接#OFN#中的前 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()，但这似乎也不起作用。我在这里做错了什么？

4

5 回答 5

0

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

$(this).html("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />" + calSubject);
于 2013-04-12T19:51:59.067 回答
0

选择文本节点并更新它们。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;' />");
    });
});
于 2013-04-12T19:53:14.550 回答
0

我会做一些更冗长的事情：

var regex = /^#0FN#/;
$("a").each(function() {
    var $this = $(this), html = $this.html();
    if (regex.test(html)) {
        html.replace(/#0FN#/, "image stuff");
        $this.html(html);
    }
});
于 2013-04-12T19:54:24.870 回答
0

使用html而不是replaceWith. 看看这个小提琴：

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

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

于 2013-04-12T19:51:46.810 回答
0

这对我来说看起来更清楚：

<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 的参数始终相同，您也可以将 onlick 从 a 标签移动到 javascript。

于 2013-04-12T19:59:54.467 回答