2012-05-30 34 views
2

我試着計算<li> -Elements在<ul>之間。我預料到這樣的工作:GetElementsByTagName(tag).length

(JavaScript的):

var ul = document.getElementById('listing'); 
function countLi(){ 
    alert("There are "+ul.getElementsByTagName('li').length+" Li-Elements in this Documnet!"); 
} 

(HTML中):

<input type="button" onclick="countLi()" value="Count the Li's!"/> 
<ul id="listing"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul>​ 

它告訴我,說: 「UL爲空」。那麼我的錯在哪裏?

親切的問候, vogti

編輯: 啊,是啊。 I did a Fiddle for you

+0

代碼運行時'ul'不在DOM中。這是[工作小提琴](http://jsfiddle.net/jNc25/1/)。 –

回答

5

你的問題是,這條線:

var ul = document.getElementById('listing'); 

正在執行的ul存在了。無論是移動你的整個腳本somewere下方的</ul>,把你的代碼在window.onload/$(document).ready回調,或者乾脆轉移該行到您的功能(這也將讓您的ul變量局部範圍以該功能):

function countLi(){ 
    var ul = document.getElementById('listing'); 
    alert("There are "+ul.getElementsByTagName('li').length+" Li-Elements in this Documnet!"); 
} 
+0

感謝您的詳細解釋。有時它就是那麼簡單...:/ – cvoigt

2

嘗試像這樣。當您的代碼塊呈現時,未準備好就緒元素。

function countLi(){ 
    var ul = document.getElementById('listing'); 
    alert("There are "+ul.getElementsByTagName('li').length+" Li-Elements in this Documnet!"); 
    } 
+0

這裏沒有什麼改變嗎? – jbabey

+0

你確定嗎? http://jsfiddle.net/jNc25/7/ – hkutluay

+0

啊,現在我明白了。對不起:P – jbabey