javascript - を含むタグ内のテキストの置換
7 に答える
最初のテキスト ノードの値を変更するには、次のようにします。
$(function(){
var selectCount = 0;
$("#bin").click(function(){
selectCount++;
for(var i = 0; i < this.childNodes.length; i++) {
var childNode = this.childNodes[i];
if(childNode.nodeType === 3) {
childNode.textContent = " Remove Selected ("+selectCount+")";
return;
}
}
});
});
nodeType === 3
テキストノードを意味します - 詳細: https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType
HTML を変更できる場合、簡単な解決策は、番号を独自のspan
要素に入れることです。
<a class="btn btn-danger" id="bin">
<i class="icon-trash"></i> Remove Selected (<span class="counter">0</span>)
</a>
次に、その要素を選択してその内容を変更できます。
$(this).children('.counter').text(selectCount);
ただし、HTML を変更できない場合:
セレクターを置き換えようとしました
$(this).children(":text")
が、役に立ちませんでした。
セレクターでテキスト ノードを選択することはできません。ただし、.contents
要素ノードだけでなく、すべての子ノードを取得するために使用できます。次に.filter
、変更するノードのノードを次のように指定できます。
$("#bin").click(function(){
selectCount++;
$(this).contents().filter(function() {
return this.nodeType === 3 && this.nodeValue.indexOf("Remove Selected") > -1;
}).get(0).nodeValue = " Remove Selected ("+selectCount+")";
});
要素には他のテキスト ノードも含まれる可能性があるためa
(HTML コード内のすべての改行とインデントは DOM テキスト ノードに変換されます)、テキスト ノードのコンテンツのチェックが必要になる場合があります。
全体を削除するテキストメソッドも<i class=icon-trash></i>
.htmlを使用し、アイコンのクラスを適用します
$(function(){
var selectCount = 0;
$("#bin").click(function(){
selectCount++;
$(this).html("<i class=icon-trash></i> Remove Selected ("+selectCount+")");
});
});
次のように、文字列の数値を更新してみてください。
$(function(){
var selectCount = 0;
$("#bin").click(function(){
selectCount++;
$(this).html($(this).html().replace(/\d+/, selectCount));
});
});