使用.text（）仅修改文本

Question

如何使用.text()修改文本，而不是使用select元素中的其他元素？

var titleTextDiv = $('div#title-text'),
    editTitleDiv = $('div#title-edit'),
    editTitleInput = $('input[name=imageTitle]'),
    editTitleLink = $('a#edit-title'),
    saveTitleLink = $('a#save-title');

editTitleDiv.hide();
editTitleInput.val($.trim(titleTextDiv.text()));

editTitleLink.click(function() {
    titleTextDiv.hide();
    editTitleDiv.fadeIn('fast');
});

saveTitleLink.click(function() {
    editTitleDiv.hide();
    titleTextDiv.text($.trim(editTitleInput.val())).fadeIn('fast');
});

[jsFIDDLE] http://jsfiddle.net/2xMtQ/

此刻，一切正常，除了标题更改为新值后，它将删除编辑/保存锚点。为什么是这样？我能做些什么不同的事情？

Answer 1

将目标文字换成<span>，例如：

<span id="title-target">Dem Bears</span>

并修改该span的文本而不是容器，如：

var titleTextDiv = $('div#title-text'),
    titleTarget = $("#title-target"),
    editTitleDiv = $('div#title-edit'),
    editTitleInput = $('input[name=imageTitle]'),
    editTitleLink = $('a#edit-title'),
    saveTitleLink = $('a#save-title');

editTitleDiv.hide();
editTitleInput.val($.trim(titleTextDiv.text()));

editTitleLink.click(function() {
    titleTextDiv.hide();
    editTitleDiv.fadeIn('fast');
});

saveTitleLink.click(function() {
    editTitleDiv.hide();
    titleTarget.text($.trim(editTitleInput.val()));
    titleTextDiv.fadeIn("fast");
});

DEMO： http://jsfiddle.net/2xMtQ/1/

此外，在id选择元素时不必使用tagName，因为jQuery优化了以“＃”开头的选择器的选择过程。当你在“＃”之前使用某些东西时，jQuery必须处理超过必要的选择器，并且效率低下。例如，使用$('#title-text')代替$('div#title-text')。

查看jQuery源代码，.text("string")正在做的是清空元素的内容，然后添加一个传入字符串的单个文本节点。这就是为什么你看到里面的一切都被替换。相关的jQuery：

this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );

，就像我说的那样，简而言之，就是清空元素并附加一个文本节点。

Answer 2

使用text时看到元素被删除的原因是因为该方法将＆＃34;将匹配元素集中的每个元素的内容设置为指定的文本。＆＃34;

这可能看起来很欺骗，因为最初使用时text只会返回元素的文本，即使有嵌套的子元素也是如此。但是，setter是一个完全不同的故事，会覆盖那里的内容。

为了能够使用jQuery的text仅修改元素中的文本，您应该本地化您的文本，以便可以正确定位以进行修改。< / p>

对jQuery文本的回顾。

jQuery＆＃39; s text作为：

吸气剂

• 获取匹配元素集合中每个元素的组合文本内容，包括其后代。

设置器

• 将匹配元素集中每个元素的内容设置为指定文本

（来源： jQuery API ）

---

您的本地化问题

的 jsFiddle Demo 的

您需要重新构建元素。文本将替换该区域内的所有内容，因此您可能希望使用文本的范围。以下是修改后的版本：

<div id="title-div"><span id="title-text">Dem Bears</span>

然后在js

var titleTextDiv = $('div#title-div'),
titleText = $('span#title-text'),
editTitleDiv = $('div#title-edit'),
editTitleInput = $('input[name=imageTitle]'),
editTitleLink = $('a#edit-title'),
saveTitleLink = $('a#save-title');

editTitleDiv.hide();
editTitleInput.val($.trim(titleText.text()));

editTitleLink.click(function() {
 titleTextDiv.hide();
 editTitleDiv.fadeIn('fast');
});

saveTitleLink.click(function() {
 editTitleDiv.hide();
 titleText.text($.trim(editTitleInput.val()));
 titleTextDiv.fadeIn('fast');
});

Answer 3

如果您真的想要，可以更改.text()以保留节点，只需替换文字

$.fn.text = function ( value ) {
    return jQuery.access( this, function( value ) {
        if(value === undefined){
            return jQuery.text( this );
        }else{
        var childNodes = this.children().detach();
        return this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) ).append(childNodes);
        }
    }, null, value, arguments.length );
}

虽然我建议只将其添加为附加功能

$.fn.textPreserveNodes

小提琴：http://jsfiddle.net/2xMtQ/10/