Поведение длины jQuery .text ()

Question

У меня есть HTML кодированный следующим образом:

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

Также есть код Javascript, который вызывается после того, как документ готов, и имеет следующую строку:

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

Теперь, если я хочуобновить мой HTML-код внутри li следующим образом:

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

т.е. я хочу добавить новый элемент span с class = "firstNameWithEllipses"

Проблема, с которой я сталкиваюсь, заключается в том, что JSвычисление изменений welcomeLen, если я добавлю приведенный выше HTML-код.

Я не совсем уверен, как работает text (). length, поскольку он возвращает следующие значения для 2 отдельных случаев;При отображении как

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

возвращается 41 & При отображении как

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

возвращается 58

Как я могу убедиться, что welcomeLen остается прежним, даже если ядобавить какой-либо HTML-код в промежуток?

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;

Вот рабочий пример .

Обновление

Если вас интересует почему это так, вы можете взглянуть на источник jQuery для text метод .Как и большинство методов 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;