How to select the second Class element using jQuery working with Spock/Geb

Question

I have done a lot of research to find out the answer for the following to no avail.

I have the following class in one <div> tag in the HTML.

<button type='button' class='btn btn-navbar document-collapse pull-right' data-target='#document_521f7592388723hsjd73hd' data-toggle='collapse'>

And I have few more classes within few other <div> tags but they use the same class name.

<button type='button' class='btn btn-navbar document-collapse pull-right' data-target='#document_521f75032f23104747ed753c' data-toggle='collapse'>

By Default, the first <div> is expanded and all the other <div> are collapsed. I need to be able to click on the second and reveal thee other buttons and controls that are hidden.

I tried the following but it didn't work.

expandOrderLink(wait:true)  { $(".btn.btn-navbar.document-collapse.pull-right:nth-child(2)") }

Is there a way we can look for all the class elements with the same name and choose the one we need (in my case the second one).

Also note that I cannot use any other attributes since have dynamic content with encrypted info (such as #document_521f75032f23104747ed753c)

Answer 1

try something like this

  $(".btn.btn-navbar.document-collapse.pull-right").eq(1);

Answer 2

Your question is misleading in that you ask about how to select an element at an index with jQuery but in your code sample you're using Geb - I suggest you change the tile of your question. Geb's Navigator API is not compatible with jQuery, it's just jQuery-like.

To select the second element in your example you can write:

expandOrderLink(wait:true)  { 
    $(".btn.btn-navbar.document-collapse.pull-right", 1) 
}

Check out the section on indexes and ranges in the manual.

You can also simply access an element using subscript operator:

expandOrderLink(wait:true)  { 
    $(".btn.btn-navbar.document-collapse.pull-right")[1]
}