Mulitple Elemente mit der gleichen ID

Question

Ich versuche, ein Skript auf drei Videos mit der gleichen ID (#vid) auf der gleichen Seite zu verwenden. Im Moment scheint nur ein Video das Skript zu verwenden.

var video = document.getElementById('vid') 
// When the 'ended' event fires 
video.addEventListener('ended', function(){ 
    // Reset the video to 
    video.currentTime = 0; 
    // And play again 
    video.load(); 
}); 

Answer 1

Die meisten dieser Antworten sind nur teilweise richtig.

Für Ihre Markup gültig zu sein, id Bedürfnis zu sein eindeutig sein. Manchmal verwenden jedoch unvorsichtige Entwickler die gleiche ID im DOM. Fürchte dich nicht, es ist nicht das Ende der Welt, du kannst immer noch auf mehrere Elemente mit derselben ID zugreifen, wie du es vielleicht mit Klassen tun würdest.

Gibt eine HTMLCollection (array like object) von Elementen mit derselben ID zurück.

Answer 2

Id muss eindeutig sein. Sie sollten class stattdessen verwenden und dann den Einsatz von document.getElementsByClassName('className');

var video = document.getElementsByClassName('vid'); 
var myFunction = function() { 
    // Reset the video to 
    this.currentTime = 0; 
    // And play again 
    this.load(); 
}; 

for (var i = 0; i < video.length; i++) { 
    video[i].addEventListener('ended', myFunction, false); 
} 

Answer 3

IDs machen kann nur einmal in einem Dokument verwendet werden, und sie sollten eindeutig sein. Was Sie stattdessen tun sollten, ist, ihnen eine Klasse zu geben und dann diese Klasse zu tarnen und die Funktion für jedes Element mit dieser Klasse auszuführen.

Beispiel gibt ihnen eine class = „vid“

<script> 

var videos = document.getElementsByClassName('vid'); 
// When the 'ended' event fires 


for (var i = 0; i < videos.length; i++) { 
    videos[i].addEventListener('ended', function(){ 
    // Reset the video to 
    videos[i].currentTime = 0; 
    // And play again 
    videos[i].load(); 
    }); 
} 

</script> 

Ich bin nicht sicher, genau dieser Code funktioniert mit dem Ereignis-Listener hinzugefügt, aber das Konzept ist richtig.

Answer 4

Das Attribut id sollte eindeutig sein, andernfalls wird immer nur das erste Attribut ausgewählt. Verwenden Sie daher class für eine Gruppe von Elementen und durchlaufen Sie sie, um den Ereignishandler anzuhängen.

<script> 
    var video = document.getElementsByClassName('vid'); 
    // convert the element collection to array using Array.from() 
    // for older browser use `[].slice.call()` for converting into array 
    // and iterate over the elements to attach listener 
    Array.from(video).forEach(function(v) { 
    v.addEventListener('ended', function() { 
     v.currentTime = 0; // or use `this` to refer the element 
     v.load(); 
    }); 
    }) 
</script> 

Answer 5

die gleiche Kennung mehr verwenden, als solche ist ungültig Markup und als getElementById nur ein einzelnes Element zurückgegeben wird es das erste man es rüberkommt zurückzukehren.

Wenn Sie jedoch das Markup unter Verwendung Ihres vorhandenen Szenarios nicht genau ändern können, können Sie querySelectorAll verwenden, um alle Elemente mit demselben id Attributwert auszuwählen.

var videos = document.querySelectorAll('[id="vid"]') 

for (var i = 0; i < videos.length; i++) { 
    videos[i].addEventListener('ended', function() { 
     // Reset the video to 
     video.currentTime = 0; 
     // And play again 
     video.load(); 
    }); 
} 

---

Wenn Sie jedoch die Elemente andere Mittel verwenden, um zu identifizieren, sollten Sie, wie Datenattribute oder Klassen.

Persönlich lehne ich Datenattribute für die funktionale Verwendung und lassen Klassen für CSS verwenden.

Auf diese Weise bleiben ihre Anwendungen exklusiv und UI-Devs ändern Klassen/CSS wird nicht Auswirkungen auf Ihren Funktionscode, da sie Attribute nicht ändern sollten und umgekehrt.