How to select nth jQuery object in jQuery collection?

Question

<div class="grid">
    <div class="box">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
    </div>
    <div class="box">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
    </div>
    <div class="box">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
    </div>
</div>

When i do

var rootElement = $('.grid').find('.box');

rootElement contains a set of jQuery objects.

How do I access a specific jQuery object in this collection? I do not want to use .each (), since I will not necessarily go through the entire collection.

I know this works, but it seems uncomfortable.

var index = 1;
$(rootElement.get(index)).find('.a'); /* Use chaining to do more work */

Is there a more elegant way to do this? Thank.

Answer 1

You can use eq:

var rootElement = $('.grid').find('.box').eq(0);
rootElement.find('.a'); /* Use chaining to do more work */