Question

我的HTML看起来像这样：

<div id="ProductCode"><span>Product number</span>2100022</div>

使用jQuery，我想将代码更改为：

<div id="ProductCode"><span>Product number</span><a href=”http://www.site.com/2100022”>2100022</a></div>

任何想法如何做到这一点？谢谢！

Answer 1

您可以迭代元素，比较其Node.nodeType，如果节点为TEXT_NODE(3)。然后使用.replaceWith()将文本节点替换为锚元素

$('#ProductCode').contents().each(function () {
    if (this.nodeType == 3) {
        var elem = $('<a>', {
            href: "http://www.example.com/" + this.nodeValue,
            text: this.nodeValue
        });
        $(this).replaceWith(elem);
    }
});

DEMO

修改

.wrap()是更好的选择

$('#ProductCode').contents().each(function () {
    if (this.nodeType == 3) {
        var elem = $('<a>', {
            href: "http://www.example.com/" + this.nodeValue
        });
        $(this).wrap(elem);
    }
});

DEMO with wrap

Answer 2

Try this code:

$(document).ready(function(){
var span_text = $('#ProductCode span').text()
$('#ProductCode span').remove();
var year = $('#ProductCode').text()
$('#ProductCode').html('<span>'+ span_text +'</span><a href=”http://www.site.com/”' + year + '>' + year  +'</a>');
})

You can check it also here: http://jsfiddle.net/aaa_borza/5nA9J/8/.

Answer 3

你可以使用＆＃39; replaceWith＆＃39;在页面加载或任何你想要的地方将文本转换为href的方法，但是这样做可以将文本放入跨度而不是使用此代码。 example

$('.link').replaceWith(function() {


  var url = $.trim($(this).text());
return '<a href="http://www.site.com/2100022" target="_blank">' + url + '</a>';
           });

html部分

<div id="ProductCode"><span>Product number</span><span class="link">2100022</span></div>

Answer 4

尝试以下方法：

它将为您提供产品ID并将其包装在锚标签上]

var $root = $('#ProductCode');
var $span = $root.children('span');

$span.remove();
$root.wrapInner('<a href="http://www.site.com/'+$root.text()+'"></a>');
$root.prepend($span);

使用jQuery创建链接和URL

4 个答案:

修改