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

【问题标题】：How access second div with same id using querySelectorAll javascript?如何使用 querySelectorAll javascript 访问具有相同 id 的第二个 div？
【发布时间】：2018-03-28 05:46:09
【问题描述】：

在这里，我的网页上有两个 div，两个 div 的数据几乎相同。接受类型属性。

我的第一个 div 属性有 type="timeline"。和第二个 div 属性类型="slideshow"。

当我的页面加载时，它只检测到第一个 div。

但是我有一个条件，如果我的 div 类型等于幻灯片然后我的代码运行但它只检测到第一个 div。

这是我的代码。

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

我该怎么办。帮助将不胜感激。

【问题讨论】：

ID 在 dom 中应该是唯一的。尝试用 class 替换 id
在 HTML 中，元素的 ID 应该始终是唯一的。因此 querySelectorAll 将始终只返回第一个元素，因为它假定没有其他元素。如果要对元素进行分组，请使用 class 而不是 id。
如果我的类型是可取的，那么我如何访问我的类型库然后条件执行。

标签： javascript jquery html jquery-selectors

【解决方案1】：

您的代码中有一些错误需要我们首先修复。

首先，您不应该在代码中多次使用相同的 id 值，因此您需要将 id 替换为一个类（即使我们的代码在这里仍然可以使用 id）。

第二个错误 - 在你的 for 循环中，你使用了错误的变量“myNodeList.length”，myNodeList 变量已经是长度，所以它没有长度属性。你应该像这样使用 divSlide 变量：

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

第三个错误- 为了访问正在循环的当前项目，您应该使用保存列表的变量（这里是 divSlide）然后添加把它i放在括号里表示当前使用的索引，像这样

  var divMain = divSlide[i];

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

第四个 - 在大多数情况下，您应该使用三个 = 符号来检查值。所以你应该使用 ===

而不是 ==

这就是代码最终的样子：

 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

【讨论】：

【解决方案2】：

您可以通过type 属性获取div，如下所示：

HTML

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

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

Online Demo (jsFiddle)

【讨论】：