Mulitple Elements with the same ID

问题

I am trying to use a script on three videos using the same ID (#vid) on the same page. At the moment only one video seems to be able to use the 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();
});

回答1:

Most of these answers are only partially correct.

For your markup to be valid, id's need to be be unique. However, sometimes careless developers re-use the same id in the DOM. Fear not, it isn't the end of the world, you can still access multiple elements with the same id as you might using classes.

document.querySelectorAll('#vid');

Will return a HTMLCollection (array like object) of elements with the same id.

回答2:

Id must be unique. You should use class instead and then make use of 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);
}

回答3:

The id attribute should be unique otherwise only the first one gets selected always. So use class for a group of elements and iterate over them to attach the event handler.

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

回答4:

IDs can only be used once in a document and they should be unique. What you shold do instead is give them a class and then target that class and run the function on every item with that class.

Example give them a 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>

I'm not sure this exact code works with the event listener adding but the concept is right.

回答5:

Using the same identifier more than ones is invalid markup and as getElementById only returns a single element it will return the first one it comes across.

However, if you are not able to change the markup using your existing scenario exactly as is you can use querySelectorAll to select all element with the same id attribute value.

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

However, if you can you should use other means to identify the elements, such as data attributes or classes.

Personally I'm leaning towards data attributes for functional use and leave classes for CSS use.

That way their uses stay exclusive and UI devs changing classes/css won't impact your functional code as they should not change attributes and vice versa.

来源：https://stackoverflow.com/questions/41831645/mulitple-elements-with-the-same-id

标签

javascript

video

getelementbyid