如何使用querySelectorAll javascript访问具有相同ID的第二个div？

Question

Here, I have two div on my webpage both div have almost same data. accept type attribute.

My first div attribute have type="timeline". and Second div attribute type ="slideshow".

When my page load it only detects the first div.

But I have a condition if my div type equal to slideshow then my code run but it detects only first div.

Here is my code.

 <div type='timeline' id='slide'> <section> <header>Title One</header> <article>Content</article> </section> <section> <header>Title Two</header> <article>Content</article> </section> <section> <header>Title Three</header> <article>Content</article> </section> <section> <header>Title Four</header> <article>Content</article> </section> </div> 

 var divSlide = document.querySelectorAll('#slide'); var myNodeList = divSlide.length; for(i = 0; i < myNodeList.length; i++) { var divMain = document.getElementById("slide"); console.log(divMain); var align = divMain.getAttribute("type"); console.log(align); console.log(myNodeList) if(align=='slideshow'){ console.log("my working code"); } } 

What should i do. Help will be appreciated.

Answer 1

You have a few of mistakes in your code that we need to fix first.

First, you shouldn't use the same id value more than once in your code so you need to replace the id with a class (even though our code can still work with id here).

Second mistake - in your for loop you are using the wrong variable "myNodeList.length", myNodeList variable already is the length so it does not have a length property. you should instead use the divSlide variable like this:

for(i = 0; i < divSlide.length; i++)

Third mistake- in order to access the current item that is being looped over you should use the variable that holds the list (which is divSlide here)and then add to it i in brackets to indicate the current index in use, like this

  var divMain = divSlide[i];

  // instead of this: var divMain = document.getElementById("slide");

Fourth - you should in most cases use triple = signs to check for values. so instead of == you should use ===

this is how the code will look like finally:

 var divSlide = document.querySelectorAll('#slide');
 var myNodeList = divSlide.length;

 document.addEventListener("DOMContentLoaded", functionName)

 function functionName(){

    for(i = 0; i < divSlide.length; i++) {
    var divMain = divSlide[i];

    var align = divMain.getAttribute("type");

    if(align ==='slideshow'){
      console.log("my working code");
    }
 } 

}

and this is codepen example

Answer 2

You can get div by type attribute like this:

HTML

<div type='timeline' id='slide'>
  this is timeline
</div>
<div type='slideshow' id='slide'>
  this is slideshow
</div>

JS

$('#slide[type=slideshow]') // get div that has id='slide' and type='slideshow'

Online Demo (jsFiddle)