Mulitple Elements avec le même ID

Question

J'essaie d'utiliser un script sur trois vidéos en utilisant le même ID (#vid) sur la même page. Pour le moment, une seule vidéo semble pouvoir utiliser le script.

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

La plupart de ces réponses ne sont que partiellement correctes.

Pour votre balisage pour être valide, le besoin de id être être unique. Cependant, parfois les développeurs imprudents réutilisent le même identifiant dans le DOM. N'ayez pas peur, ce n'est pas la fin du monde, vous pouvez toujours accéder à plusieurs éléments avec le même identifiant que vous pourriez utiliser des classes.

document.querySelectorAll('#vid'); 

Renvoie une HTMLCollection (objet semblable à un tableau) d'éléments ayant le même ID.

Answer 2

Id doit être unique. Vous devez utiliser class au lieu et utiliser 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

ID ne peut être utilisé qu'une seule fois dans un document et ils devraient être unique. Au lieu de cela, vous leur donnez une classe, puis ciblez cette classe et exécutez la fonction sur chaque élément de cette classe.

exemple leur donner une 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> 

Je ne suis pas sûr que ce code exact fonctionne avec l'écouteur d'événement en ajoutant mais le concept est bon.

Answer 4

L'attribut id doit être unique, sinon seul le premier est toujours sélectionné. Utilisez donc class pour un groupe d'éléments et parcourez-les pour attacher le gestionnaire d'événements.

<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

En utilisant le même identifiant plus que les invalides et est le balisage comme getElementById ne retourne un seul élément, il retournera le premier qu'il rencontre.

Cependant, si vous ne pouvez pas modifier le balisage en utilisant votre scénario existant exactement comme vous pouvez utiliser querySelectorAll pour sélectionner tous les éléments ayant la même valeur d'attribut id.

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

---

Cependant, si vous pouvez vous devez utiliser d'autres moyens d'identifier les éléments, tels que les attributs de données ou les classes.

Personnellement, je me penche vers les attributs de données pour une utilisation fonctionnelle et de laisser des classes pour l'utilisation CSS.

De cette façon, leurs utilisations restent exclusifs et les développeurs d'interface utilisateur modifient classes/css n'affectera pas votre code fonctionnel car ils ne devraient pas changer les attributs et vice versa.