javascript - HTML - 一次准确地按位置访问文档中的 div

Question

我有一个生成的页面，Yii CListView其中包含一个div和multiple child divs。我需要访问一个特定的孩子div并在其中添加一个div。

虽然我设法使用一种方法解决了它，但不认为它是正确的。以下是我的解决方案的概述（下面的代码不包含所有必要的变量声明和其他东西，我粘贴了核心代码而不是完整的。）：

1. 通过 Id 访问父 div（因为 Id 可用，因为我可以将其编码到 Yii 中）

2. 使用以下方法获取此 div 中的所有元素：

   var div_childern = document.getElementById('StudentGridViewId').getElementsByTagName('*');
   

3. 遍历并到达所需的 div 时，添加了我的新 div。请注意，我要在其中添加新 div 的 div 的类名称为“items”。代码如下：

       for (var i = 0; i < div_childern.length; i++) {
       if (div_childern[i].getAttribute('class')=='items'){
           document.getElementById('StudentGridViewId').getElementsByTagName('*')[i].appendChild(newdiv);
           i=div_childern.length+1;
       }
     }
   

此解决方案中的唯一问题是，我访问整个文档两次，调用 getElementsByTagName. 首先获取所有列表，items然后再次添加我的新div. 有更好的方法吗？

而且，有人能指点我设置生成Id的“项目”div吗Yii？

谢谢费萨尔

Answer 1

如果你使用 JQuery，你可能会得到一个更优雅的解决方案。但是，如果你想使用传统的 javascript，你可以这样做

  for (var i = 0; i < div_childern.length; i++) {
    if (div_childern[i].getAttribute('class')=='items'){
        div_childern[i].appendChild(newdiv);
        i=div_childern.length+1;
    }
  }