CODEWITHSUNDEEP
javascriptjquery
CorayThan
CorayThan

Reputation: 17825

Get Text Value of `a` element

I'm trying to get the text values of some a elements using jquery selectors, but I seem to be having issues. If I use .val() I get nothing, and if I use .text() they have an extra return and whitespace.

Here's the element whose text values I need: 

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

First off, I'm trying to write a selector that selects only the elements where the innerText does not equal "LangLocale".

I tried doing that this way:

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

But it seems to pull in all of them anyway.

Then, if I try to call .text() off of those selectors, I get something like:

"en_US [return]          en_CA [return]            "

When what I really want is an array of their innerTexts, something like this:

['en_US', 'en_CA']

Can anyone tell me A. how to write the proper selector to get only the ones I want, and B. how to get just the innerText from that element once I have it?

Upvotes: 1

Views: 181

Answers (3)

Xotic750
Xotic750

Reputation: 23472

In POJS you could do this

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);

Output

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

On jsfiddle

Which in jquery syntax could be

Javascript

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

console.log(arrayOfTexts);

Output

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

On jsfiddle

Upvotes: 1

Spudley
Spudley

Reputation: 168685

The carriage return and white space is valid and correct; it's what is in the element - you have a carriage return plus a whole load of white space right there in the HTML. If you don't want it, you'll have to trim it off.

Or you could close up the space at the end of the <a> element, so that the </a> is immediately after the end of the content so that there's no white space in it.

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

The other alternative would be to put the relevant part of the content of the <a> element into an inner element that doesn't have any white space.

en_US

... and then select that new inner element instead of the <a>.

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

You can try this -

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

To get array of inner texts -

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

Demo ---> http://jsfiddle.net/WCp2b/3/

Upvotes: 4

Related Questions