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

Question

我有以下HTML代码段:

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

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

我解决了这个问题,首先克隆了<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/