jQuery .text（）長度行爲

我有我的HTML編碼如下;jQuery .text（）長度行爲

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

另外還有一個Javascript代碼，在文檔準備就緒後調用它，它具有以下行;

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

現在，如果我想更新我的裏面的李代碼如下，

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

即我想帶class =「firstNameWithEllipses」

的問題，我面對的是，JS計算welcomeLen改變，如果我添加上面的HTML代碼，添加一個新的span元素。

我不太確定text（）。length是如何工作的，因爲它爲2個單獨的情況返回以下值; 當作爲

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

呈現返回41 & 當作爲

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

呈現返回58

如何確保welcomeLen保持不變，即使我添加任何HTML代碼內的跨度？

來源

2012-01-24 testndtv

這是因爲您的選擇器同時匹配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;

來源

2012-01-24 07:53:45

THX很多關於那個......我不明白它是如何返回這兩個範圍...怎麼樣計算髮生....但無論如何，我實際上跨多個HTML使用JS代碼，新的span元素只添加1 html ...所以，如果我更新選擇器，如何確保現有的東西也將工作你已經展示了什麼？ – testndtv

我用過的選擇器也適用於您的原始示例。它只是尋找一個''span''元素，它是'li'的子元素，這兩個例子都是這種情況。 –

@testndtv - 如果你對它爲什麼返回兩個文本感興趣，我已經更新了我的答案。 –

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

來源

2012-01-24 07:54:55 xdazz

jQuery .text（）長度行爲

回答

相關問題