如何使用jQuery更改span内的文本，让其他span包含的节点保持不变？

Question

我有以下HTML代码段：

<span class="target">Change me <a class="changeme" href="#">now</a></span>

我想从jQuery中更改跨度内的文本节点（即“更改我”），同时保留嵌套的<a>标签以及所有属性等等。 我最初的抱怨是在span节点上使用.text(...) ，但事实证明这将用传递的文本内容替换整个内部部分。

我通过首先克隆<a>标签，然后设置<span>的新文本内容（将删除原始的<a>标签），最后将克隆的<a>标签附加到我的<span>来解决这个问题。 这样可行，但对于像这样的简单任务感觉有点过分。 顺便说一句。 我不能保证跨度内会有一个初始文本节点 - 它可能是空的，就像：

<span class="target"><a class="changeme" href="#">now</a></span>

我也做了一个jsfiddle 。 那么，这样做的巧妙方法是什么？

Answer 1

尝试类似的东西：

$('a.changeme').on('click', function() {
  $(this).closest('.target').contents().not(this).eq(0).replaceWith('Do it again ');
});

演示： http ： //jsfiddle.net/eEMGz/

参考： http ： //api.jquery.com/contents/

更新 ：

我想我读错了你的问题，而你正试图替换它已经存在的文本并以其他方式注入。 为此，请尝试：

$('a.changeme').on('click', function() {
  var
    $tmp = $(this).closest('.target').contents().not(this).eq(0),
    dia = document.createTextNode('Do it again ');

  $tmp.length > 0 ? $tmp.replaceWith(dia) : $(dia).insertBefore(this);
});

演示： http ： //jsfiddle.net/eEMGz/3/

Answer 2

你可以使用.contents() ：

//set the new text to replace the old text
var newText = 'New Text';

//bind `click` event handler to the `.changeme` elements
$('.changeme').on('click', function () {

    //iterate over the nodes in this `<span>` element
    $.each($(this).parent().contents(), function () {

        //if the type of this node is undefined then it's a text node and we want to replace it
        if (typeof this.tagName == 'undefined') {

            //to replace the node we can use `.replaceWith()`
            $(this).replaceWith(newText);
        }
    });
});​

这是一个演示： http ： //jsfiddle.net/jasper/PURHA/1/

你的一些文档：

• .contents() ： http ： //api.jquery.com/contents
• .replaceWith() ： http ： //api.jquery.com/replacewith
• typeof ： https ： //developer.mozilla.org/en/JavaScript/Reference/Operators/typeof

更新

var newText = 'New Text';
$('a').on('click', function () {
    $.each($(this).parent().contents(), function () {
        if (typeof this.tagName == 'undefined') {

            //instead of replacing this node with the replacement string, just replace it with a blank string
            $(this).replaceWith('');
        }
    });

    //then add the replacement string to the `<span>` element regardless of it's initial state
    $(this).parent().prepend(newText);
});​

演示： http ： //jsfiddle.net/jasper/PURHA/2/

Answer 3

你可以试试这个。

var $textNode, $parent;
$('.changeme').on('click', function(){
    $parent = $(this).parent(); 
    $textNode= $parent.contents().filter(function() {
            return this.nodeType == 3;
    });
    if($textNode.length){
        $textNode.replaceWith('Content changed')
    }
    else{
        $parent.prepend('New content');
    }
});

工作演示 - http://jsfiddle.net/ShankarSangoli/yx5Ju/8/

Answer 4

你走出jQuery是因为它无法帮助你处理文本节点。 以下将删除具有类“target”的每个<span>元素的第一个子元素，当且仅当它存在并且是文本节点时。

演示： http ： //jsfiddle.net/yx5Ju/11/

码：

$('span.target').each(function() {
    var firstChild = this.firstChild;
    if (firstChild && firstChild.nodeType == 3) {
        firstChild.data = "Do it again";
    }
});

Answer 5

这不是一个完美的例子我猜，但你可以使用内容功能。

console.log($("span.target").contents()[0].data);

Answer 6

你可以将文本包装成一个跨度......但......

尝试这个。 http://jsfiddle.net/Y8tMk/

$(function(){
    var txt = '';
    $('.target').contents().each(function(){
        if(this.nodeType==3){
                    this.textContent = 'done ';
        }
    });
});

Answer 7

您可以更改对象的本机（非jquery）数据属性。 在这里更新了jsfiddle： http ： //jsfiddle.net/elgreg/yx5Ju/2/

就像是：

$('a.changeme3').click(function(){
    $('span.target3').contents().get(0).data = 'Do it again';
});

contents（）获取内部并且get（0）将我们返回到原始元素，而.data现在是对本机js textnode的引用。 （我没有测试过这个跨浏览器。）

这个jsfiddle和答案实际上只是这个问题答案的扩展解释： 更改文本节点文本

Answer 8

$('a.changeme').click(function() {                         
    var firstNode= $(this).parent().contents()[0];
        if( firstNode.nodeType==3){
        firstNode.nodeValue='New text';
    }
})

编辑：不确定您需要什么布局规则，更新以仅测试第一个节点，否则根据需要进行调整