Получить текстовое значение элемента `a`

Question

Я пытаюсь получить текстовые значения некоторых элементов a с помощью селекторов jquery, но у меня, похоже, возникают проблемы. Если я использую .val(), я ничего не получаю, и если я использую .text(), у них есть дополнительный возврат и пробел.

Вот элемент, текст значения мне нужно:

<a class="btn dropdown-toggle langLocaleNameSelector" 
        data-toggle="dropdown">en_US<span class="caret"></span> 
       </a> 

Во-первых, я пытаюсь написать селектор, который выбирает только те элементы, где InnerText не равно «LangLocale».

Я пытался сделать это таким образом:

var selectors = $('a.langLocaleNameSelector[innerText!="LangLocale"]'); 

Но это, кажется, тянуть все из них так или иначе.

Тогда, если я пытаюсь вызвать .text() от этих селекторов, я получаю что-то вроде:

"en_US [return]   en_CA [return]   " 

Когда то, что я действительно хочу это массив их innerTexts, что-то вроде этого:

['en_US', 'en_CA'] 

Может ли кто-нибудь сказать мне, как написать правильный селектор, чтобы получить только те, которые я хочу, и B. как получить только внутренний текст из этого элемента, как только я его получу?

Answer 1

Вы можете попробовать это -

var elems = $('a.langLocaleNameSelector').filter(function() { 
    return $.trim($(this).text()) !== "LangLocale"; 
}); 

Чтобы получить массив внутренних текстов -

var arr = $('a.langLocaleNameSelector').filter(function() { 
    return $.trim($(this).text()) !== "LangLocale"; 
}).map(function() { 
    return $.trim($(this).text()); 
}).get(); 

Демонстрационные --->http://jsfiddle.net/WCp2b/3/

Answer 2

возврата каретки и белого пространства справедливо и правильно; это то, что находится в элементе - у вас есть возврат каретки плюс полная загрузка пробела прямо в HTML. Если вы этого не хотите, вам придется обрезать его.

Или вы можете закрыть пространство в конце элемента <a>, так что </a> сразу же после окончания содержимого, чтобы в нем не было пробела.

<a class="btn dropdown-toggle langLocaleNameSelector" 
       data-toggle="dropdown">en_US<span class="caret"></span></a> 

Другой альтернативой было бы поставить соответствующую часть содержания <a> элемента во внутренний элемент, который не имеет никакого пустого пространства.

en_US

..., а затем выбрать этот новый внутренний элемент вместо <a>.

Answer 3

В POJS вы могли бы сделать это

HTML

<a class="btn dropdown-toggle langLocaleNameSelector" data-toggle="dropdown">en_US<span class="caret"></span></a> 

<a class="btn dropdown-toggle langLocaleNameSelector" data-toggle="dropdown">LangLocale<span class="caret"></span></a> 

<a class="btn dropdown-toggle langLocaleNameSelector" data-toggle="dropdown">en_UK<span class="caret"></span></a> 

<a class="btn dropdown-toggle langLocaleNameSelector" data-toggle="dropdown">en_CA<span class="caret"></span></a> 

Javascript

var arrayOfTexts = Array.prototype.reduce.call(document.getElementsByClassName("langLocaleNameSelector"), function (array, langLocaleNameSelector) { 
    var text = langLocaleNameSelector.childNodes[0].nodeValue; 

    if (text !== "LangLocale") { 
     array.push(text); 
    } 

    return array; 
}, []); 

console.log(arrayOfTexts); 

Выход

["en_US", "en_UK", "en_CA"] 

На jsfiddle

Какой синтаксис Jquery может быть

JavaScript

var arrayOfTexts = $(".langLocaleNameSelector").filter(function() { 
    return this.childNodes[0].nodeValue !== "LangLocale"; 
}).map(function() { 
    return this.childNodes[0].nodeValue; 
}).toArray(); 

console.log(arrayOfTexts); 

Выход

["en_US", "en_UK", "en_CA"] 

На jsfiddle