jquery - 如何在不删除任何内部标签的情况下替换锚标签的文本？

Question

如何在不删除任何内部标签的情况下替换锚标签的文本？

<div class="xyz">
  <a>Hello <b class="caret"></b></a>
</div>

$('.xyz').click(function(){
  $(this).find('a').text('hello2');  
});    

JSFiddle：http: //jsfiddle.net/DXR32/

当单击蓝色区域时，我正在更改锚标记中的文本，但即使锚中的 b 标记也会消失。有任何解决这个问题的方法吗？

Answer 1

类似下面的东西会起作用，将按钮附加到任何文本更改的末尾：http: //jsfiddle.net/DXR32/1/

var blueButton = '<b class="caret"></b>';

$('.xyz').click(function(){
   $(this).find('a').html('hello2 '+blueButton); 
});

编辑：

或者，正如@Nikola Radosavljević 和@François Wahl 在下面建议的那样，将您想要更改的文本封装在锚内自己的元素中，如下所示：

<div class="xyz">
    <a><span class="switchable">Hello</span> <b class="caret"></b></a>
</div>

$('.xyz').click(function(){
   $(this).find('.switchable').text('hello2');
});

这避免了必须对任何按钮 html 进行硬编码，并且还允许您在任意数量的锚元素上重用 click 功能，例如，它们所需要的只是它们自己的包含您要切换的文本的span类；switchable

<div class="xyz">
    <a><span class="switchable">Click Me 1</span> <b class="caret"></b></a>
</div>
<div class="xyz">
    <a><span class="switchable">Click Me 2</span> <b class="caret2"></b></a>
</div>
<div class="xyz">
    <a><span class="switchable">Click Me 3</span> <b class="caret3"></b></a>
</div>

$('.xyz').click(function(){
   $(this).find('.switchable').text('You Clicked Me!');
});

显然，您的应用程序可能与上一个示例完全不同。

Answer 2

你有两个选择

• 将要更改的内容附在标签中并更改

<div class="xyz">
    <a><span id="hello">Hello </span><b class="caret"></b></a>
</div>
$('.xyz').click(function() {
    $(this).find('#hello').text('hello2');
});

• 做字符串替换（这对于比 hello world 更复杂的东西都不好）

$('.xyz').click(function() {
    var a = $(this).find("a");
    a.html(a.html().replace("Hello ", "Hello2 "));    
});

Answer 3

您可以尝试在替换文本之前保存锚的.children()，如下所示：

$('.xyz').click(function() {
    var cache = $(this).find('a').children();
    $(this).find('a').text('Hello2');
    $(this).find('a').append(cache);
});​

然后.append()将它们返回。我已经用这个更新了你的 jsFiddle。

Answer 4

试试这个：

$('.xyz').click(function(){
   var b = '<b class="caret"></b>'; 
   $(this).find('a').html('hello2' + b);    
});

http://jsfiddle.net/DXR32/3/

Answer 5

$('.xyz').click(function(){
    $(this).find('a').html(function(i, oldHtml) {
      return oldHtml.replace('Hello', 'hello2');
    });
});    
​

演示