2012-03-19 82 views
2

我想選擇多少個div在我的html中。所以我使用.length方法,但它並沒有給我想要的結果。您可以在這裏http://jsfiddle.net/WbwuC/JavaScript中的循環無法正常工作

<style> 

.main { width:980px; margin:0 auto; border:solid 1px #F00; overflow:hidden} 

.box { width:300px; float:left; margin-right:20px; background:#00F; height:200px;} 
.new {border:solid 2px #333;} 

</style> 


<script type="text/javascript"> 


    var amy= document.getElementsByTagName('div'); 

    for (i=0;i<amy.length;i++){ 
     var jar= amy[i]; 
     } 
    alert(jar) 


</script> 

</head> 

<body> 
<div id="main"> 
<div class="box"><h3>first</h3></div> 
<div class="box"><h3>secnond</h3></div> 
<div class="box"><h3>third</h3></div> 

</div> 

</body> 
+0

http://jsfiddle.net/WbwuC/1/ – PatrikAkerstrand 2012-03-19 11:19:25

+1

什麼是理想的結果呢? – 2012-03-19 11:20:00

+0

結果應該是4 – Carlos 2012-03-19 11:21:49

回答

3

如果你的腳本,而加載頁面時,的div存在之前運行,不會有任何的div呢。您應該添加一個頁面加載事件來觸發代碼。你的jsfiddle工作順便說一句...它啓用了代碼的onload。

http://jsfiddle.net/EEjaP/

+0

謝謝你sir它正在工作 – Carlos 2012-03-19 11:27:58

6

看到一個演示這並不是因爲在腳本執行尚未處理的文檔的工作時間在體內的div。嘗試在div下移動腳本,或者等待文檔加載事件。

0

試試這個

for (i=0;i<amy.length;i++){ 
     var jar= amy[i]; 
alert(jar) //put it here , ur problem will be solved 

     } 
//  alert(jar) //Dont put here 
0

更改腳本這樣的:

<script type="text/javascript"> 
    var amy = document.getElementsByTagName('div'); 
    for (i = 0; i < amy.length; i++) { 
     var jar = i; 
    } 
    alert(jar)​; 
</script> 
0

當你想要得到的結果是4,根據您的澄清評論,最簡單的方法是使用.length當你在你的循環做你自己的例子!無需循環:

var length = amy.length; // Will return 4 

不過,若你要循環,你可以使用你提出這樣的循環(很不必要的,雖然,你可以使用length屬性如上!)

var length = 0; 
for (i=0; i<amy.length; i++){ 
    length++; 
} 
// After the loop has run, length will have value 4 

爲了讓代碼正常工作,您必須等待執行,直到DOM準備就緒。

此外,對於您的示例中的警報,您試圖警告一個對象。由於警報方法需要一個字符串,它會將您的對象轉換爲其字符串表示[object htmlDivElement]

2

這裏是工作demo。但真的不明白你的預期。請找到下面的代碼的解釋。

var amy= document.getElementsByTagName('div'); 

上面一行只是選擇HTML頁面上的Div標籤。現在,當前HTML包含三個包裹在主DIV中的DIV標籤,即總共4個DIV元素。所以,第一個提醒是'4'。

for (var i=0;i<amy.length-1;i++){ 
     var jar= amy[i]; 
     alert(jar.innerHTML); 
}​ 

該代碼通過四個DIV標籤循環。 innerHTML用於顯示該div內的內容。你會看到,第一整個DIV塊提醒。在此之後,每個div都會收到警報。

請讓我知道這是你想要的?

0

試試這個 -

.main { width:980px; margin:0 auto; border:solid 1px #F00; overflow:hidden} 

.box { width:300px; float:left; margin-right:20px; background:#00F; height:200px;} 
.new {border:solid 2px #333;} 

</style> 


<script type="text/javascript"> 

function count() { 
    var amy= document.getElementsByTagName('div'); 

    for (i=0;i<amy.length;i++){ 
     var jar= amy[i]; 
    } 
    alert(jar.className); 

} 


</script> 

</head> 

<body onload="count()"> 
<div id="main"> 
<div class="box"><h3>first</h3></div> 
<div class="box"><h3>secnond</h3></div> 
<div class="box"><h3>third</h3></div> 

</div> 
</body> 
1

,你可以簡單地使用.length。就這樣... jsFiddle

要確認你的DOM完全加載,可以在結束body -tag之前把腳本只需在html文檔的末尾。

HTH,

--hennson