使用 JS 查找嵌套元素的 HTML ID答案

【问题标题】：Find HTML ID of a nested element using JS使用 JS 查找嵌套元素的 HTML ID
【发布时间】：2014-09-23 22:32:07
【问题描述】：

我正在尝试使用和元素制作网格。每行由一个 div 表示，行内的每个单元格由一个 span 表示，如下所示：

<div id="row1">
    <span id="cell1"></span>
    <span id="cell2"></span>
    <span id="cell3"></span>
</div>
<div id="row2">
    <span id="cell1"></span>
    <span id="cell2"></span>
    <span id="cell3"></span>
</div>
<div id="row3">
    <span id="cell1"></span>
    <span id="cell2"></span>
    <span id="cell3"></span>
</div>

我希望能够通过其 ID 访问每个单元格。比如说我想访问中间单元格，row2，cell2。如何使用 JS 访问该特定单元格？谢谢！

【问题讨论】：

首先ID应该是唯一的，所以你只能对一个元素使用ID。不能使用重复的 ID 值。
您也没有发布任何解决您自己问题的尝试。

标签： javascript html

【解决方案1】：

首先，ID 在整个文档中必须是唯一的。你应该在这里使用一个类。

之后，你可以通过它的父ID和它自己的类来获取元素。

document.getElementById('row2').getElementsByClassName('cell2')[0]; // the first .cell2 in #row2

或者，更简单地说，如果这是您唯一一次拥有这些课程：

document.getElementsByClassName('cell2')[1]; // the second .cell2 in the document

如果你不关心旧的 IE 版本，你也可以这样做：

document.querySelector('#row2 .cell2');

【讨论】：

【解决方案2】：

ID 应该是独一无二的。您在 html 中写的内容不起作用。但是，您可以做的是拥有一个“行”和“单元格”类，并使用例如此 jquery 语法逐个浏览它们

var where = $("#where_you_start")
for(var i=0; i++; i<how_many_rows_forward){
    //Do some stuff on the current row
    where = where.next(".row")
}

（当然不用jquery也可以）

【讨论】：

【解决方案3】：

首先，你应该知道html元素的ID属性被设计为在页面上是唯一的，所以多个元素共享同一个ID是不好的，我会使用类来代替

<div id="row1">
  <span class="cell1"></span>
  <span class="cell2"></span>
  <span class="cell3"></span>
</div>

<div id="row2">
  <span class="cell1"></span>
  <span class="cell2"></span>
  <span class="cell3"></span>
</div>

<div id="row3">
  <span class="cell1"></span>
  <span class="cell2"></span>
  <span class="cell3"></span>
</div>

要访问您的单元格，您可以使用 JQuery，这样：

$("#row2 .cell2");

或者，在纯 javascript 中

document.querySelector("#row2 .cell2")

您可以从这里做什么取决于 jQuery 在第一个选项中提供的功能，以及裸浏览器 API 在第二个选项中可以做什么。我推荐使用 jQuery，因为它的简单性和跨浏览器支持

【讨论】：