jQuery .text（）長さの振る舞い

Question

私のHTMLは次のようにコード化されています。

<div class="welcomeText"> 
<ul>  
<li><span<%=Some Java Code%></span> 
</li> 
</ul> 
</div> 

また、次の行を持つ文書の準備ができた後に呼び出さJavaScriptコードがあります。

var welcomeLen = $(".welcomeText span").text().length; 

ここで、li内でHTMLコードを次のように更新したいとします。

<li><span><span class="firstNameWithEllipses"><%=Some Java Code%></span></span> 

すなわち、私が直面しています問題は、私は上記のHTMLコードを追加する場合welcomeLenのためのJSの計算が変化することで、クラス=「firstNameWithEllipses」

で新しいspan要素を追加します。

text（）。lengthが2つの別々のケースに対して以下の値を返すので、どのように動作するのかはよく分かりません。

<span>Hello, StudentFname87654 from Functional!</span> 

としてレンダリングするとき、それは41 &

<span>Hello, <span class="firstNameWithEllipses">StudentFname87654</span> from Functional!</span> 

としてレンダリングする場合、それはどのように私はwelcomeLenは、私は、任意のHTMLを追加しても同じままであることを保証します58

を返すを返しますスパンの中のコード？

Answer 1

これは、セレクタがspan要素の両方に一致し、両方からテキストを返すためです。あなたは子供span以外の任意の要素を追加している可能性があり、あなたがこの問題を経験していないでしょう。

console.log($(".welcomeText span").text()); 
//Output: Hello, StudentFname87654 from Functional!StudentFname87654 

あなたのセレクタは、より具体的なことを確認します。

var welcomeLen = $(".welcomeText li > span").text().length; 

がここに working exampleです：あなたは、例えば、 .welcomeTextの子孫である liの直接の子であるだけ spanの要素を選択することができます。

更新

あなたはなぜに興味があれば、このような場合は、あなたがjQuery source for the text methodで見ることができます。どのように...それは両方のスパンのために返す方法そのための多くは...私はかなり理解していなかった

var ret = ""; 
jQuery.each(text || this, function(){ //Iterate over matched set 
    jQuery.each(this.childNodes, function(){ //Iterate over children of current element 
     if (this.nodeType != 8) 
      ret += this.nodeType != 1 ? 
        this.nodeValue : //Append text to overall string 
        jQuery.fn.text([ this ]); //Get text of descendants 
    }); 
}); 
return ret; 

Answer 2

var welcomeLen = $(".welcomeText span").not(".firstNameWithEllipses").text().length;