jquery find to get the first element

Question

I am writing $(this).closest('.comment').find('form').toggle('slow'); and the problem is each of the forms in the child is being toggled. I would like only the first form to be toggled. the html is something like the below and this is the a link

<div comment>
<a href>
<form>
</form>
    <a href>
    <div comment>
    <form>
    </form>
    </div>
</div>

You already got a good answer to this one, but next time please take the time to look at the documentation. JQuery is quite well documented, and you would have found the `:first` selector easily on your own had you only been looking for it... http://docs.jquery.com/Main_Page — Tomas Aschan, Feb 01 '10 at 00:15
I did and couldnt find it. I am bad at jquery and this is my 2nd time using it. I just picked up the basics and already spend 1 hour on this and my prev question — , Feb 01 '10 at 00:19
Perhaps you didn't look in api.jquery.com but instead in the old documentation at docs.jquery.com, and I have to agree that due to the old documentation's structure it used to be very hard to find simple API functions like this one. — nikola, Feb 01 '10 at 00:25

score 68 · Answer 1 · answered Feb 01 '10 at 00:13

68

You can use either

$(this).closest('.comment').find('form').eq(0).toggle('slow');

or

$(this).closest('.comment').find('form:first').toggle('slow');

answered Feb 01 '10 at 00:13

nickf

537,072
198
649
721

second option worked for me, i had to select first div jQuery(this).closest('.divmodule').find('div:first').attr('class')); – charles Oct 15 '13 at 06:05
FYI, $('.foo:first') is quite a bit slower than $('.foo').first(). http://jsperf.com/jquery-first-vs-first-vs-eq-0-vs-0/2 – Malcolm Dwyer Dec 03 '13 at 22:22
2

If you really care about performance, native `getElementsByTagName` is way, way faster: http://jsperf.com/jquery-first-vs-first-vs-eq-0-vs-0/16 – Kuba Holuj Aug 27 '14 at 17:39
2

Does this first traverse the tree and then pick then first element? Or does it somehow stop after finding the first element? I ask because I'm dealing with a tree with hundreds of nested nodes but only want to select the first matching element. I'm wondering if this method is grossly inefficient for this case. – Jesse Aldridge Aug 29 '14 at 03:30

score 14 · Answer 2 · edited May 19 '20 at 18:55

14

Use :first selector like below :

$(this).closest('.comment').find('form:first').toggle('slow');

edited May 19 '20 at 18:55

str

42,689
17
109
127

answered Sep 20 '12 at 06:36

Dhanasekar Murugesan

3,141
1
18
21

score 8 · Answer 3 · answered Jul 19 '16 at 13:49

8

using jquery simply use:

    $( "form" ).first().toggle('slow');

answered Jul 19 '16 at 13:49

Olivier Royo

810
10
13

nikola · Answer 4 · 2013-12-19T00:03:24.903

5

I use

$([selector]).slice(0, 1)

because it's the most explicit way to select a slice of a query and because it can be easily modified to match not the first element but the next, etc.

edited Dec 19 '13 at 00:03

answered Feb 01 '10 at 00:16

nikola

2,241
4
30
42

score 1 · Answer 5 · answered Dec 23 '19 at 12:12

1

The simplest way to get the first result of find is with good old [index] operator:

$('.comment').find('form')[0];

Works like a charm!

answered Dec 23 '19 at 12:12

Aleksandar

3,558
1
39
42

score 0 · Answer 6 · answered Sep 29 '21 at 19:44

0

you can use like this

$(this).find('>.comment').find('>form').toggle('slow');

answered Sep 29 '21 at 19:44

Niraj Patel

65
14

jquery find to get the first element

6 Answers6

Linked

Related