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 62 · Answer 1 · answered Feb 01 '10 at 00:13

62

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

520,029
197
633
717

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

38,402
15
99
123

answered Sep 20 '12 at 06:36

Dhanasekar Murugesan

2,911
1
16
21

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

6

using jquery simply use:

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

answered Jul 19 '16 at 13:49

Olivier Royo

763
8
12

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,201
4
29
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

2,362
26
36

score 0 · Answer 6 · answered Apr 22 '19 at 07:49

Use the below example for jquery find to get the first element

More filtring methods With Demo

$(document).ready(function(){
  $(".first").first().css("background-color", "green");
});

.first{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}

<!DOCTYPE html>
<html>
<head>
<title>jQuery First Method Example By Tutsmake</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>
<body>
 
<h1>This is first() method example</h1>
 
<div class="first">
  <p>A paragraph in a div.</p>
  <p>Another paragraph in a div.</p>
</div>
<br>
 
<div class="first">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
<br>
 
<div class="first">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
 
</body>
</html>

score 0 · Answer 7 · 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

85
14

jquery find to get the first element

7 Answers7

Linked

Related