How do I select a single element in jQuery?

Question

I have a table structure that looks like:

<table>
 <tr id="row1">
   <td>
     <div>row 1 content1</div>
   </td>
   <td>
     <div>row 1 content2</div>
   </td>
   <td>
     <div>row 1 content3</div>
   </td>
 </tr>
 <tr id="row2">
   <td>
     <div>row 2 content1</div>
   </td>
   <td>
     <div>row 2 content2</div>
   </td>
   <td>
     <div>row 2 content3</div>
   </td>
 </tr>
 <tr id="row3">
   <td>
     <div>row 3 content1</div>
   </td>
   <td>
     <div>row 3 content2</div>
   </td>
   <td>
     <div>row 3 content3</div>
   </td>
 </tr>
</table>

Using jQuery I am trying to select the DIV in the second cell of the third row. I tried the following (amongst other things):

var d = $('#row3').children(':eq(1)').children(':eq(0)');

What I get back is an array with a single element (the DIV I'm after) and I have to then access using d[0]. Why is jQuery returning a single element array, I thought using the selector above would return the DIV element directly?

@Shog9 - Duh...Ok a light just switched on in my brain, I get it now. Cheers.

vcarel · Answer 1 · 2013-11-25T17:05:52.910

36

If you prefer keeping a jQuery object, you may write instead:

$("selector").first().val()

edited Nov 25 '13 at 17:05

answered Jul 05 '12 at 13:35

vcarel

1,787
1
16
23

1

This will return an array containing single element. You can't fire `click` events on it. CodeNinja solution above return single element not within an array. – Ahmad Alfy Sep 03 '13 at 22:56
3

jQuery always works with array-like objects. Any subsequent action refers to all elements. So all of those expressions will produce the same result : `$("selector:first").click()`, `$("selector").first().click()`, `$($("selector")[0]).click()`. See Shog9's answer. – vcarel Nov 25 '13 at 17:05

score 26 · Accepted Answer · answered Nov 21 '08 at 01:14

26

jQuery always returns a set of elements. Sometimes, the set is empty. Sometimes, it contains only one element. The beauty of this is that you can write code to work the same way regardless of how many elements are matched:

$("selector").each(function()
{
   this.style.backgroundColor = "red";
});

Fun!

answered Nov 21 '08 at 01:14

Shog9

156,901
35
231
235

8

How is this possibly the selected answer? The question was "How do I select a single element?" and your answer was "you get all of them!" – claudekennilol Mar 05 '21 at 01:36

score 15 · Answer 3 · answered Jun 07 '11 at 17:34

15

If you find that you know you will only deal with a single element and that only one element will be returned, you can always select the zero index of the array.

$("selector")[0].value

It's dirty and breaks the convention of jQuery in general... but you "could" do this.

answered Jun 07 '11 at 17:34

CodeNinja

151
1
2

I'm getting "TypeError: $(...)[0].html is not a function" while .first() works fine. – Jonas Äppelgran May 18 '15 at 09:59
3

Just selecting the [0] index of the array will return a DOM element but not a jQuery object, so you will not be able to use jQuery methods like .html() on it. – abd3721 Nov 05 '15 at 18:21

score 14 · Answer 4 · answered Jul 21 '15 at 18:14

14

$("selector").eq(5)

This returns a first class jquery array with just the 5th item. i.e.,I can do jquery functions on the return value.

Found the answer here: https://forum.jquery.com/topic/jquery-class-selectors-referencing-individual-elements

answered Jul 21 '15 at 18:14

Vijay Vepakomma

733
6
9

1

Never mind, this does not answer the posted question but I was looking for this. Didn't realize until I read the question again. – Vijay Vepakomma Jul 21 '15 at 18:17
This is the only correct answer because eq returns a jQuery prototype element. – Bluebaron Mar 13 '23 at 09:50

score 3 · Answer 5 · answered Apr 04 '17 at 14:53

There are several options for doing this:

"Select the first of several Div elements in the below snippet and change it's color to pink"

<div>Div 1</div> <div class="highlight">Div 2</div> <div id="third">Div 3</div> <div class="highlight">Div 4</div>

Here we can select the first Div in the following ways:

1) $("div").first().css("color","pink");
2) $("div:first").css("color","pink");
3) $("div:first-of-type").css("color","pink");

Please note that 2 is a jQuery construct and not a native css construct and hence, can be slightly less performant.

score 1 · Answer 6 · answered Sep 13 '19 at 19:10

1

This works in the jQuery 3.4.1:

$($('li')[0]).css('color', 'blue');

answered Sep 13 '19 at 19:10

Waqu Wex

19
2

score -2 · Answer 7 · answered Jul 31 '15 at 09:57

-2

To get div directly, try this

$divElement = $('#row3 td div');

answered Jul 31 '15 at 09:57

pradip_PRP

102
4

but if you would do this on the above HTML the operation, e.g. `$('#row3 td div').css('background-color','red')` **would be applied to all of these 3 `
`s!** (at least with jQuery 2.1)
– Andreas Covidiot Jun 12 '18 at 06:13

How do I select a single element in jQuery?

7 Answers7

Linked