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); 
});

编辑：

或者，正如@NikolaRadosavljević和@FrançoisWahl在下面所建议的那样，将你希望在其自己的元素中更改的文本封装在锚点中，如下所示：

<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

您有两个选择

Enclose content you want to change into a tag and change it

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

Do string replace (which is bad for anything more complex than 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（）将它们取回。我已用此更新了your 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');
    });
});

<强> DEMO

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

5 个答案: