How to select the second Class element using jQuery working with Spock/Geb
geb, jquery, jquery-selectors, spock
Solution
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]
}
Problem
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)