I have a span with a text inside it like :

<span class="characters-count">&#40;160 Characters Left&#41;</span>

given the span a class in this case .characters-count , when i tried class selector using jQuery to get the text inside span :

$(".characters-count")[0].text();

it returns undefined !

However this selector works well :

$("span.characters-count").text();

anyone can explain what is happening ?

I have a span with a text inside it like :

<span class="characters-count">&#40;160 Characters Left&#41;</span>

given the span a class in this case .characters-count , when i tried class selector using jQuery to get the text inside span :

$(".characters-count")[0].text();

it returns undefined !

However this selector works well :

$("span.characters-count").text();

anyone can explain what is happening ?

• javascript
• jquery
• html
• jquery-selectors

• 1 You seem to think the selector is what is different, but why do you have the [0] in the line that doesn't work? – nnnnnn Commented Mar 24, 2015 at 6:56
• your code $(".characters-count")[0].text(); is not suposed to work check console for error – Sahil Sharma Commented Mar 24, 2015 at 6:59
• @nnnnnn sorry i didnt get that part , what do you mean exactly ? – ProllyGeek Commented Mar 24, 2015 at 6:59
• Look carefully at your own code - the line that doesn't work has [0] just before .text(). Why? – nnnnnn Commented Mar 24, 2015 at 7:00
• @nnnnnn because class selector will return a list – ProllyGeek Commented Mar 24, 2015 at 7:01

4 Answers 4

$("span.characters-count").text(); 

In our case you work with jQuery Object that has text method

$(".characters-count")[0].text();

In this case you work with actual DOM element (like document.getElementByClassName('characters-count')[0]) that does not have text method

Use

$(".characters-count").text();  

Demo

console.log($(".characters-count:first").text())

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="characters-count">&#40;160 Characters Left&#41;</span>

try something like this:

$(".characters-count:first").text()

Check here, why it was not working for you.

//This will return dom element, so it doesn't have `text()` method, that's why it was throwing error for you.
    console.log($(".characters-count:first")[0]); 


// This will return object of an element, you can use jQuery selectors to get first element from collection and set text to it
     console.log($("span.characters-count"));
     console.log($("span.characters-count:first").text

);

you need to use innerText instead of text() when you use $(".characters-count")[0] check DEMO

 $(".characters-count")[0].innerText