jQuery（内部「スパン」付き）のテキストを「ラベル」に変更する方法

Question

「黄色」から「黄色」へのjQueryの変更方法を教えてください。ページは赤を中心にスパンを追加

にロードされたときに

<label class="class_label" for="mycheck"> 
<span class="class_span"></span> 
<input type="checkbox" id="mycheck"/>Red</label> 

Answer 1

どのようにこの

$(".class_label")[0].lastChild.nodeValue = "Yellow"; 

Answer 2

.ready（）が呼び出され、このexemple

$(document).ready(function() 
{ 
    $("#foo").html("Yellow"); 
}); 

HTMLは次のようになりますため、 "foo" という、それを呼び出すことができます：

<label class="class_label" for="mycheck"> 
    <span class="class_span"></span> 
    <input type="checkbox" id="mycheck"/><span id="foo">Red</span> 
</label> 

Answer 3

これはいかがですか？これにより、ラベルの最後のテキストノード（「赤」）が削除され、新しい値（「黄」）が追加されます。

、その後、以下の機能があなたのために働くだろう（つまり「赤」で常に label_class要素の最後のテキスト・ノードになります）HTML構造が一定のままであると仮定すると

var label = $('.class_label'); 
label.contents().last().remove(); 
label.append('Yellow'); 

Answer 4

：

function replaceTextWith(oldWord,newWord,inWhichClass){ 
    var elems = document.getElementsByClassName(inWhichClass); 
    var newTextNode; 
    for (var i=0;i<elems.length;i++){ 
     if (elems[i].lastChild.nodeValue == oldWord && elems[i].className == inWhichClass) { 
      elems[i].removeChild(elems[i].lastChild); 
      newTextNode = document.createTextNode(newWord); 
      elems[i].appendChild(newTextNode); 
     } 
    } 
} 

形式でこれを呼び出します。

replaceTextWith('Red','Yellow','class_label'); 

JS Fiddle demoを。

これはjQuerifiedになる可能性がありますが、それはやや難しいようです（ただし、カスタマイズが簡単です）。リンクされた（上の）JS Fiddle demoでは、このページのonLoadイベントを使用して関数を呼び出すことができましたが、とにかくjQueryを使用している場合は、$(document).ready({ /* ... */ })に関数呼び出しを簡単にラップすることもできます。

上記の関数では大文字と小文字が区別されるため、たとえば'red' != 'Red'です。これは次のように改訂することができます：

function replaceTextWith(oldWord,newWord,inWhichClass){ 
    var elems = document.getElementsByClassName(inWhichClass); 
    var newTextNode; 
    for (var i=0;i<elems.length;i++){ 
     /* first comparison: converts both values to lower-case to be case-insensitive 
      second comparison: explicitly checks the class-name, which *should* have 
           been in the first posted function, too (now edited in) */ 
     if (elems[i].lastChild.nodeValue.toLowerCase() == oldWord.toLowerCase() && elems[i].className == inWhichClass) { 
      elems[i].removeChild(elems[i].lastChild); 
      newTextNode = document.createTextNode(newWord); 
      elems[i].appendChild(newTextNode); 
     } 
    } 
} 

JS Fiddle demo