javascript - 如何使用 jquery 将 div 的内部 HTML 替换为文本？

Question

下面在 HTML 中，在页面中呈现。

<div class="breadcrumb">
<span class="breadcrumb-trail" id="ctl00_ContentPlaceHolder1_ctl00_bc_content"><a title="" href="/default.aspx" target="_self">Home</a> &gt; <a title="" href="/summary.aspx?sid=105&amp;pid=133" target="_self">Summary</a></span>
</div>

在文档就绪功能上，我必须更换

<a title="" href="/summary.aspx?sid=105&amp;pid=133" target="_self">Summary</a>

和

Summary

以便将 HTML 更改为以下内容：

<div class="breadcrumb">
<span class="breadcrumb-trail" id="ctl00_ContentPlaceHolder1_ctl00_bc_content"><a title="" href="/default.aspx" target="_self">Home</a> &gt; Summary</span>
</div>

我怎么能用 jQuery 做到这一点？

Answer 1

尝试这个：

$(document).ready(function(){
    var text = $('#ctl00_ContentPlaceHolder1_ctl00_bc_content a:last-child').text();
    $('#ctl00_ContentPlaceHolder1_ctl00_bc_content a:last-child').remove();
    $('#ctl00_ContentPlaceHolder1_ctl00_bc_content').append(text);
});

演示

或者您可以使用：

 var text = $('#ctl00_ContentPlaceHolder1_ctl00_bc_content a:last-child').text();
 $('#ctl00_ContentPlaceHolder1_ctl00_bc_content a:last-child').replaceWith(text);

演示

Answer 2

工作演示 http://jsfiddle.net/B4CrS/

您的 ID 看起来像 Visual Studio 生成的用户控件，您可以简单地做到这一点！

这将满足您的需求:)

代码

$(document).ready(function () {
    $('a').filter(function (index) {
       if ($(this).text() === "Summary")
           $(this).replaceWith('Summary');
        return $(this).text() === "Summary";
    });

});

Answer 3

使用jQuery.replaceWith

var node = $(".breadcrumb-trail > a:last-child");
var text = node.text();
node.replaceWith( text );

您可以根据需要更改选择器。当前选择器选择带有面包屑跟踪类的最后一个子元素“a”。

Answer 4

$('.breadcrumb-trail a:contains("Summary")').replaceWith('Summary');

或者

$(".breadcrumb-trail a").last().replaceWith('Summary');

可以工作，如果你想要它更短。

做了一个小提琴：http: //jsfiddle.net/filever10/erpEN/

Answer 5

考虑使用 thttp://api.jquery.com/html/

$(document).ready(function(){
    $("#ctl00_ContentPlaceHolder1_ctl00_bc_content").html("Summary")
}