How to save value of an element selected by the array style in jQuery?

Question

Let's say we have following this:

<p class="first">This is paragraph 1.</p> 
<p class="second">This is paragraph 2.</p> 
<p id="third">This is paragraph 3.</p>
<p>This is paragraph 4.</p>

We can save the value of an element in value variable and show like this.

var value = $('p').slice(3,4);
value.text(); // result --> This is paragraph 4

Above way has no problem if we know the number of element but we'll get problem if we have a lot of elements and we want to do with looping. why I get error if I do like this?

$('p')[3].text();

What should I do if I want to loop and get values?

Nick Craver · Accepted Answer · 2010-03-23 01:10:46Z

2

Loop like this:

$('p').each(function(i) {
  alert($(this).text());
  //or this:
  alert($('p').eq(i).text());
});

When you do [3] you're getting the DOM element <p> not the jQuery object, which has the .text() method.

$('p')[3] == DOM Element, doesn't have `.text()`
$('p').eq(3) == jQuery object, has `.text()`

answered Mar 23, 2010 at 1:10

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SLaks · Accepted Answer · 2010-03-23 01:10:59Z

1

jQuery objects can function as arrays of DOM elements, not other jQuery objects.
Therefore, writing $(...)[3] gives you a raw DOM element, not a jQuery object.

You need to call the eq function:

$('p').eq(3).text();

answered Mar 23, 2010 at 1:10

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Jeff Rupert · Accepted Answer · 2010-03-23 01:12:00Z

1

The problem with what you're trying to do is that $('p')[3] will not return a jQuery object, and therefore it does not have a text() function.

Instead, use something like this:

$('p.eq(3)')

// OR

$('p').eq(3)

A general rule of thumb is that if you aren't sure whether or not an object has any jQuery methods, you're probably well off simply wrapping it in $(...) or jQuery(...), the latter being used more if you are using jQuery.noConflict(); (and therefore using Prototype or some other library that uses $ as its variable).

answered Mar 23, 2010 at 1:12

Jeff Rupert

4,8602 gold badges23 silver badges17 bronze badges

Comments

tvanfosson · Accepted Answer · 2010-03-23 01:12:07Z

1

The reason for your error is that you get the actual DOM element when you get it using array notation. The DOM element doesn't have a text() function. To get all the values, use each.

var values = [];
$('p').each( function(i) {
    values[i] = $(this).text();
}

To get a particular element, use eq();

var value = $('p').eq(3).text();

answered Mar 23, 2010 at 1:12

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Collectives™ on Stack Overflow

How to save value of an element selected by the array style in jQuery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related