jquery - jQueryを使用して要素のテキストノードを更新するにはどうすればよいですか？

Question

---

私のコード

私はこのhtmlを持っています

​<a href="#">
    <i>[please keep this]</i>
    Some Text To Update
</a>​​​​​​​​​​​​​​​​​​​​​​​

そしてこのjQuery

$('a').click(function(){
    $(this).text('Updated Text');
    return false;        
});​

---

問題

リンクをクリックすると、次のようになります。

<a href="#">Updated Text</a>

---

望ましい結果

要素を保存して<i>これを取得したい：

<a href="#"><i>[please keep this]</i> Updated Text</a>

HTMLは変更できません

---

jsFiddleで一緒に遊ぶ

Answer 1

それを行う最良の方法は次のとおりです。

スパンの追加:

<a href="#">
    <i>[please keep this]</i>
    <span class="replace">Some Text To Update</span>
</a>​​​​​​​​​​​​​​​​​​​​​​​


$('a').click(function(){
    $('.replace', this).text('Updated Text');
    return false;
});​

a 内にテキストを追加してspanから、スパン テキストを更新します。

デモ

html を変更しない場合:

$('a').click(function(){
    $(this).html(function(i, text) {
        return text.substr(0, text.lastIndexOf('>') + 1) + 'Updated Text';
    });
    return false;
});

デモ

また

$('a').click(function(){
    var $keep = $('i', this);
    $(this).empty().append($keep).append('Updated Text');
});

デモ

Answer 2

$('a').click(function(){
var saveThis = $(this).children('i');

$(this).text('Updated Text').prepend(saveThis);
 return false;        
  });​

保存するテキストは常にiタグに含まれると思います

編集：代わりにprependを使用しましたが、jsfiddleで機能するようになりました。HTMLの変更は必要ありません編集：@Arielごとに.cloneを削除しました

Answer 3

ええ、それは簡単ではありません。

最適なオプションは、変更する部分を次のようにラップすることです<SPAN>。

<a href="#">
    <i>[please keep this]</i>
    <span>Some Text To Update</span>
</a>​​​​​​​​​​​​​​​​​​​​​​​

$('a span').....

2 番目に最適なオプションは、パーツを抽出して<i>再利用することです。

var i = $('i', this);
$(this).empty().append(i, ' Updated Text'));