具有原型的第N个子选择器 [英] Nth-child Selector with Prototype
本文介绍了具有原型的第N个子选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将"nth-child(n)"与Prototype一起使用，就像对jQuery一样.下面是一个代码示例...
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);
不幸的是，这似乎并未选择元素(因为单击和更改不起作用).当我将select的类放到那里时，它确实可以工作...但是我不能使用该类，而需要通过nth-child来完成.我相信:first和:last可以工作，但是我总共需要6项才能做到这一点.即使这样，它也不一定总是全部6项.
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.
如果有人可以提供第n个孩子的例子，以及它如何与Prototype一起工作，那就太好了！
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>
<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>
<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>
<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>
<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>
<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>
<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>
推荐答案
$$()是CSS选择器方法，该方法返回元素数组
$$() 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
只要加载了Event.simulate，它就应该可以工作
this should work though as long as you have Event.simulate loaded
$$('div.amfinder-horizontal td:nth-child(1) select').invoke('simulate','click');
这篇关于具有原型的第N个子选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
