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

Question

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

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

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

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

当单击蓝色区域时，我正在更改 anchor 标记内的文本，但即使 anchor 标记内的 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 下面建议的那样，将您想要更改的文本封装在 anchor 内其自己的元素中，如下所示:

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

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

这避免了对任何按钮 html 进行硬编码，并且还允许您在任意数量的 anchor 元素上重用单击功能，它们所需要的只是它们自己的 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!');
});

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