2009-08-14 62 views
9

給定以下標記。使用原型遍歷到特定的子元素

<div id="example"> 
    <div> 
    <div> 
     <input type='hidden'></input> 
    </div> 
    </div> 
</div> 

我如何快速得到隱藏的輸入元素給定ID爲'example'的頂部div元素ID?

我可以破解它,所以我可以迭代通過每個子元素,直到我點擊輸入,但是,我想改善這一點,並利用原型,並簡單地跳轉到給定div的隱藏輸入。

謝謝!

回答

16
$$('#example input[type=hidden]').first() 
+0

謝謝!我知道這很簡單(並且看起來完全有意義)。我真的需要加快JS的速度,並找到我需要的文檔。 – mwilliams 2009-08-14 14:59:20

+0

這通過使用jQuery。如何快速獲得它使用正常的JavaScript? – Sriram 2012-06-15 11:51:15

+0

當'example'是一個類,而不是一個id時如何做到這一點? – Sliq 2013-05-10 13:16:56

26

原型提供了一大堆的方法可以做到這一點:

// This, from Bill's answer, is probably the fastest, since it uses the 
// Browser's optimized selector engine to get straight to the element 
$$('#example input[type=hidden]').first(); 

// This isn't bad either. You still use the browser's selector engine 
// To get straight to the #example element, then you must traverse a 
// (small) DOM tree. 
// 
// element.down(selector) selects the first node matching the selector which 
// is an decendent of element 
$('example').down('input'); 

// Here, you'll get an array containing all the inputs under 'example'. In your HTML 
// there is only one. 
$('example').select('input') 

// You can also use element.select() to combine separate groups of elements, 
// For instance, if you needed all the form elements: 
$('example').select('input', 'textarea', 'select'); 
-2

我更喜歡直接的方式

document.forms[0].fieldName.value 

這是更少的代碼,無需使用jQuery和更友好的代碼設計。