javascript - スパン以外のテキストを変更する方法

Question

スパンテキスト以外のテキストデータを変更するにはどうすればよいですか?

<h2 id="nameUser" >Muhammed <span> mobile :989 531 9991</span></h2>

h2スパン以外に変更する解決策はありますか?

score 4 · Accepted Answer

.contents()テキストノードを含むノードのコレクションを返します。したがって、あなたの場合、これは機能します：

$('#nameUser').contents()[0].nodeValue = 'Another name';

SPAN 以外のすべてのノードを取得する場合は、次を試してください。

$('#nameUser').contents().filter(function() {
    return this.nodeName != 'SPAN';
}).each(function(i) {
    // modify each text node
    this.nodeValue = 'name '+i;
});

デモ: http://jsfiddle.net/Vks82/

score 2 · Accepted Answer

h2 要素の childNodes で最初の textnode を検索します。テキストノードの値を変更します。

var element = document.getElementById('nameUser');
element.childNodes[0].nodeValue = 'New String';

..動作するはずです。この例に限り、最初の子ノードは必要なテキストノードであるため、検索する必要はありません。そうでなければあなたは..

score 1 · Accepted Answer

この例は、子要素を変更せずに親要素を変更するのに役立ちます:

var content= $('#nameUser').children();
$('#nameUser').text('Altered Text').append(content);

score 1 · Accepted Answer

最初に子を保存することでそれを行うことができます。これは、それが機能するコードペンです。

http://codepen.io/beckje01/pen/sGLot

var h2 = $('#nameUser');
var elmsToSave = h2.children();

h2.empty();
h2.text('bob');
h2.append(elmsToSave);

コメントで指摘されているように、これは変更するテキストが最初の場合にのみ機能します。

score 1 · Accepted Answer

$('#nameUser').contents().each(function() {
    if (this.nodeType == 3) 
        this.data = "The text you want here";
});

ライブデモ

score 0 · Accepted Answer

これはspan、子のテキストなしでテキストが必要な他の要素に対してだけでなく、他の要素に対しても機能します。

$("#nameUser")
    .clone()   
    .children()
    .remove()  
    .end()  
    .text();

テキストを変更するために、単純な jQuery 関数を作成しました。

replaceTextWith = function($element, $replacement){
    $oldText = $element.clone().children().remove().end().text();
    $element.text($element.text().replace($oldText, $replacement));
}

replaceTextWith($("#nameUser"), "Bruno"); //usage

フィドルで動作する実際の例を次に示します

score 0 · Accepted Answer

これを試して ...

<h2 id="nameUser" >Muhammed <span id="nameUserSpan"> mobile :989 531 9991</span></h2>

<script>
$(document).ready(function() {
    var inspan= $("#nameUserSpan").html();
    var newuser='New User';
    $("#nameUser").html('');
    $("#nameUser").html(newuser + '<span id="nameUserSpan">' + inspan + '</span>');
});
</script>

javascript - スパン以外のテキストを変更する方法

7 に答える 7

Related

Reference