45

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>
Improve this question
3
  • 6
    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... docs.jquery.com/Main_Page Commented Feb 1, 2010 at 0: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 Commented Feb 1, 2010 at 0:19
  • 4
    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. Commented Feb 1, 2010 at 0:25

7 Answers 7

Reset to default
69

You can use either 

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

or

$(this).closest('.comment').find('form:first').toggle('slow');
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

second option worked for me, i had to select first div jQuery(this).closest('.divmodule').find('div:first').attr('class'));
FYI, $('.foo:first') is quite a bit slower than $('.foo').first(). jsperf.com/jquery-first-vs-first-vs-eq-0-vs-0/2
If you really care about performance, native getElementsByTagName is way, way faster: jsperf.com/jquery-first-vs-first-vs-eq-0-vs-0/16
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.
14

Use :first selector like below :

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

Comments

8

using jquery simply use:

    $( "form" ).first().toggle('slow');
Improve this answer

Comments

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.

Improve this answer

Comments

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!

Improve this answer

Comments

0

you can use like this

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

Comments

0

Since find get array of form elements the first one would be [0]. I would do this to make sure to get the first one.

$(this).closest('.comment').find('form')[0].toggle('slow');
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.