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>

即。我想添加一个带有class =“firstNameWithEllipses”

的新span元素

我面临的问题是，如果添加上述HTML代码，welcomeLen的JS计算会发生变化。

我不太确定text（）。length是如何工作的，因为它为2个不同的情况返回以下值; 呈现为

时

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

它返回41 ＆安培; 呈现为

时

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

它返回58

即使我在跨度内添加任何HTML代码，如何确保welcomeLen保持不变？

Answer 1

这是因为您的选择器匹配两个span元素并从两者返回文本。您可以添加除孩子span以外的任何元素，但您不会遇到此问题：

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

使您的选择器更具体。例如，您可以只选择span元素作为li的后代的.welcomeText的直接子元素：

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

这是working example。

<强>更新

如果您对为什么感兴趣，可以查看jQuery source for the text method。像大多数jQuery方法一样，它迭代匹配集中的所有元素：

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;

jQuery .text（）长度行为

2 个答案: