getElementsByClassName Fehler in einem div

Question

Ich habe eine Seite mit mehreren divs enthält HTML5 Video-Player. Im Grunde so etwas wie dieses

<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> 
... 

Jetzt möchte ich mit der Klasse „Panel“ und Pause alle Videoplayer über alle Elemente iterieren. So versuche ich, dies in JavaScript:

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

Was ich erhalte, ist diese Fehlermeldung:

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

Gibt es jemanden, der mir dieses Problem beheben kann helfen?

Vielen Dank im Voraus!

Answer 1

Ihre Frage hat eine falsche Schreibweise. Er bezieht sich auf:

document.getElementsByClassName(...) 

dass Unter der Annahme, nur ein Tippfehler in Ihrer Frage ist (da Sie nicht den Fehler melden, die dazu führen würde), dann:

document.getElemtsByClassName(...) 

, die sein sollte

---

Diese Codezeile ein HTMLCollection wird, nicht ein einzelne DOM-Element:

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

So können Sie nicht tun:

video.pause(); 

weil video in dieser obigen Codezeile ist ein HTMLCollection, kein DOM-Element und ein HTMLCollection keine .pause() Methode hat. Um ein DOM-Element aus dem HTMLCollection zu erhalten, müssen Sie in die sie mit einem Immobilienindex erreichen, um ein individuelles DOM-Element zu erhalten:

video[0].pause(); 

Oder können Sie das ganze HTMLCollection iterieren über alle DOM-Elemente in der für den Betrieb HTML-Sammlung. Dies wäre der erste Spieler Objekt in jedem div bekommen (siehe [0]):

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

Oder, wenn Sie alle Spieler Objekte mit dieser Technik wollten, würden Sie zwei for Loops verwenden müssen:

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(); 
    } 
} 

Sie auch nur wollen, können document.querySelectorAll() verwenden und diese in einer Abfrage und eine Iteration alle tun:

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

, auch Ihre HTML gegeben, dann ist es nicht e Warum löschen Sie zuerst .panel Elemente.Wenn Sie keine anderen .player Objekte haben, die Sie zu vermeiden sind versuchen, können Sie nur die Spieler Objekte erhalten direkt in eine einfachere Abfrage:

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

---

Und wenn Sie nicht über die Verwendung von jQuery fragte, es ist oft nützlich für DOM-Abfragen, Iterationen und Manipulationen:

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