getElementsByClassName錯誤在一個div內

-1

我有一個包含多個div的包含html5視頻播放器的頁面。基本上是這樣的getElementsByClassName錯誤在一個div內

<div class="panel"> 
    <video class="player"><source src="video1.mp4" type="video/mp4" /></video> 
</div> 
<div class="panel"> 
    <video class="player"><source src="video2.mp4" type="video/mp4" /></video> 
</div> 
...

現在我想通過與類「面板」的所有元素進行迭代，並暫停所有videoplayers。所以我在JavaScript嘗試這樣的：

var panels = document.getElementsByClassName("panel"); 
for (i = 0; i < panels.length; i++) { 
    var video = panels[i].getElementsByClassName("player"); 
    video.pause(); 
}

我得到的是這樣的錯誤消息：

Uncaught TypeError: panels[i].getElementByClassName is not a function

有沒有人誰可以幫我解決這個問題？

非常感謝！

來源

2016-09-28 sangmister

看起來很奇怪，你不只是直接引用播放器，因爲它會更快。 – epascarello

你在你的代碼中有拼寫錯誤，你能發佈實際的代碼嗎？ – epascarello

沒有'getElementByClassName'，只有'getElementsByClassName' – Bergi

你的問題有一個錯誤。它指的是：

document.getElemtsByClassName(...)

這應該是：

document.getElementsByClassName(...)

假設僅僅是在你的問題一個錯字（因爲你不報告，將導致錯誤），則：

這行代碼得到的HTMLCollection，而不是一個單獨的DOM元素：

var video = panels[i].getElementsByClassName("player");

所以，你不能這樣做：

video.pause();

因爲video在上面的代碼行的HTMLCollection，而不是一個DOM元素的HTMLCollection沒有.pause()方法。爲了充分利用的HTMLCollection DOM元素，你必須深入到它的性能指標得到一個單獨的DOM元素：

video[0].pause();

或者，您可以遍歷整個的HTMLCollection就在所有的DOM元素進行操作HTML集合。這將是獲得第1選手對象在每個DIV（見[0]）：

var panels = document.getElementsByClassName("panel"); 
for (i = 0; i < panels.length; i++) { 
    var video = panels[i].getElementsByClassName("player")[0]; 
    video.pause(); 
}

或者，如果你使用這種技術希望所有的球員對象，你需要使用兩個for循環：

var panels = document.getElementsByClassName("panel"); 
for (var i = 0; i < panels.length; i++) { 
    var videos = panels[i].getElementsByClassName("player"); 
    for (var j = 0; j < videos.length; j++) { 
     videos[j].pause(); 
    } 
}

你也可能只是想用document.querySelectorAll()，做這一切在一個查詢和一個迭代：

var videos = document.querySelectorAll(".panel .player"); 
for (var i = 0; i < videos.length; i++) { 
    videos[i].pause(); 
}

此外，鑑於你的HTML，它不是Ë完全清楚你爲什麼首先查詢.panel元素。如果你有，你想避免沒有其他.player對象，你可以得到玩家的物品直接在一個簡單的查詢：

var videos = document.querySelectorAll(".player"); 
for (var i = 0; i < videos.length; i++) { 
    videos[i].pause(); 
}

而且，雖然你並沒有問使用jQuery，它通常用於DOM查詢，迭代和操作：

$(".panel .player").each(function() { 
    this.pause(); 
});

來源

2016-09-28 16:48:29 jfriend00

非常感謝！這就是訣竅！我也想在面板上設置屬性 - 所以你的第二個建議對我來說不起作用，但是對於其他用戶來說我想是一個很好的提示！ – sangmister

getElementsByClassName錯誤在一個div內

回答

相關問題