Nth-child Selector with Prototype

Question

I'm trying to use "nth-child(n)" with Prototype, as I do with jQuery. A code example is below...

function myFunction()
{
$$('div.amfinder-horizontal td:nth-child(1) select').simulate('click');
$$('div.amfinder-horizontal td:nth-child(1) select').simulate('change');
}

Event.observe(window,"load",myFunction);

Unfortunately, this doesn't appear to be selecting the element (as the click and change don't work). When I put the class of the select in there, it does work... but I can't use the class and need to do it via nth-child. I believe :first and :last works, but I have 6 total that I need to do this for.. and even then, it won't always be all 6 of them.

If someone could provide an example of nth-child and how it could work with Prototype, that'd be great!

<div class="amfinder-horizontal" id="amfinder_529e1406aff23Container">
   <table>
      <tbody>
         <tr>
            <td>
               <div class="dropdown-title">Year</div>
               <div class="dropdown-element active">
                  <select name="finder[424]" id="finder-72--424" style="width: 101px;" class="active">
                     <option value="0">
                        Year                        
                     </option>
                     <option value="8736830">
                        2013                        
                     </option>
                     <option value="8734482">
                        2012                        
                     </option>
                     <option value="8734488">
                        2011                        
                     </option>
                     <option value="8734487">
                        2010                        
                     </option>
                     <option value="8734481">
                        2009                        
                     </option>
                     <option value="8734486">
                        2008                        
                     </option>
                     <option value="8734485">
                        2007                        
                     </option>
                     <option value="8734484">
                        2006                        
                     </option>
                     <option value="8734494">
                        2005                        
                     </option>
                     <option value="8734483">
                        2004                        
                     </option>
                     <option value="8734489">
                        2003                        
                     </option>
                     <option value="8734492">
                        2002                        
                     </option>
                     <option value="8734491">
                        2001                        
                     </option>
                     <option value="8734490">
                        2000                        
                     </option>
                     <option value="8734493">
                        1999                        
                     </option>
                     <option value="8734496">
                        1998                        
                     </option>
                     <option value="8734495">
                        1997                        
                     </option>
                     <option value="8734501">
                        1996                        
                     </option>
                     <option value="8734500">
                        1995                        
                     </option>
                     <option value="8734499">
                        1994                        
                     </option>
                     <option value="8734498">
                        1993                        
                     </option>
                     <option value="8734497">
                        1992                        
                     </option>
                     <option value="8734503">
                        1991                        
                     </option>
                     <option value="8734502">
                        1990                        
                     </option>
                     <option value="8734504">
                        1989                        
                     </option>
                     <option value="8734505">
                        1988                        
                     </option>
                     <option value="8734508">
                        1987                        
                     </option>
                     <option value="8734507">
                        1986                        
                     </option>
                     <option value="8734506">
                        1985                        
                     </option>
                     <option value="0">Year</option>
                  </select>
                  &nbsp;
                  <span class="arrow"></span>
               </div>
            </td>
            <td>
               <div class="dropdown-title">Make</div>
               <div class="dropdown-element">
                  <select name="finder[425]" id="finder-72--425" disabled="disabled" style="width:120px">
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                     <option value="0">Make</option>
                  </select>
                  &nbsp;
                  <span class="arrow"></span>
               </div>
            </td>
            <td>
               <div class="dropdown-title">Model</div>
               <div class="dropdown-element">
                  <select name="finder[426]" id="finder-72--426" disabled="disabled" style="width:120px">
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                     <option value="0">Model</option>
                  </select>
                  &nbsp;
                  <span class="arrow"></span>
               </div>
            </td>
            <td>
               <div class="dropdown-title">Sub Model</div>
               <div class="dropdown-element">
                  <select name="finder[427]" id="finder-72--427" disabled="disabled" style="width:120px">
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                     <option value="0">Sub Model</option>
                  </select>
                  &nbsp;
                  <span class="arrow"></span>
               </div>
            </td>
            <td>
               <div class="dropdown-title">Engine</div>
               <div class="dropdown-element">
                  <select name="finder[428]" id="finder-72--428" disabled="disabled" style="width:120px">
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                     <option value="0">Engine</option>
                  </select>
                  &nbsp;
                  <span class="arrow"></span>
               </div>
            </td>
            <td>
               <div class="dropdown-title">Position</div>
               <div class="dropdown-element">
                  <select name="finder[429]" id="finder-72--429" disabled="disabled" style="width:120px">
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                     <option value="0">Position</option>
                  </select>
                  &nbsp;
                  <span class="arrow"></span>
               </div>
            </td>
         </tr>
         <tr>
            <td colspan="6">
               <br>
               <div class="amfinder-buttons" style="display:none">
                  <button id="findbtn" class="btn" title="Find" type="submit"><span><span>Find</span></span></button>
                  <button class="btn" name="reset" value="1" title="Reset" type="submit"><span><span>Reset</span></span></button>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>

Answer 1

$$() is the CSS selector method which returns an array of elements

$$('div.amfinder-horizontal td:nth-child(1) select').simulate('click');

will not work because you can't run simulate on an array

this should work though as long as you have Event.simulate loaded

$$('div.amfinder-horizontal td:nth-child(1) select').invoke('simulate','click');

Answer 2

You have used $ 2 times.

Probably, it is cause of your problem.

Change

$$('div.amfinder-horizontal td:nth-child(1) select').simulate('click');
$$('div.amfinder-horizontal td:nth-child(1) select').simulate('change');

to

$('div.amfinder-horizontal td:nth-child(1) select').simulate('click');
$('div.amfinder-horizontal td:nth-child(1) select').simulate('change');

Answer 3

You can select them as in a array style

http://jsbin.com/eDAWaji/1/edit

html:

<ol class="myclass">
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>      
</ol>

js:

var li = $$('body > ol.myclass li');
li[3].style.background = 'red';