CODEWITHSUNDEEP
javascriptjquerytext
user2255226
user2255226

Reputation: 204

jQuery - text() method?

Being fairly new to jquery and javascript I can't seem to understand how the .text() method really works. I read through the jQuery documentation but still can't figure it out. 

for (var i=0; i < arrayLength; i++){
        var currentElement = $(".artist")[i];
        var currentArtist = currentElement.text;
        console.log(currentElement);
        console.log(currentArtist);
    }

currentArtist returns "undefined" in the console. It works fine on the $(".artist") alone, but not when I use the [i] or anything additional for that matter. What am I missing here? How else could I grab a text value inside a selector?

Upvotes: 2

Views: 488

Answers (4)

Hacketo
Hacketo

Reputation: 4997

You should use a each():

$(".artist").each(function(i,val){

    var currentArtist = $(val).text();
    console.log(val);
    console.log(currentArtist);
});

$(".artist") produce a jQuery object that could be like this:

[div, div, div, div, prevObject: jQuery.fn.jQuery.init, context: document, selector: ".artist"...]

So the result of $(".artist")[i] is a HTMLElement and do not have a text method, that's why you're getting undefined

Also text() is a function and may be followed with ()

But if you want to keep the for loop you can do

for (var i=0; i < arrayLength; i++){
    var currentElement = $(".artist")[i];
    var currentArtist = $(currentElement).text();
    console.log(currentElement);
    console.log(currentArtist);
}

Upvotes: 2

Rafael
Rafael

Reputation: 18522

By using the [] operator on jQuery object you're accessing the raw element node that was found by jQuery. This raw element doesn't have the jQuery methods anymore, nor a text property.

If you want to get single element from jQuery object and keep the jQuery wrapper, use eq method.

var artistElement = $(".artist").eq(i);
artistElement.text(); // gets the text content of the element

The code you've posted is also not very optimized. For instance, with every loop iteration you're searching the document over and over again for elements with class artist. Better to cache that search result in a variable before performing the loop. And if the loop iterates over all .artist elements, you can use jQuery's each method.

$(".artist").each(function () {
    var artist = $(this); // this poits to the raw element thus wrapping into jQuery object
    console.log(artist.text());
});

Upvotes: 2

Bellu
Bellu

Reputation: 2573

var currentArtist = currentElement.text;

Should be:

var currentArtist = currentElement.text();

Upvotes: 2

ps2goat
ps2goat

Reputation: 8485

.text() shows the text of an html element or set of html elements that would be visible to the user.

Upvotes: 0

Related Questions