Question

认为我有一些相同内容的课程

 <div class="parentclass">

         <div class="childClass">
         </div>
         <div class="childClass">
         </div>
         <div class="childClass">
         </div>
    </div>

  <div class="parentclass">

         <div class="childClass">
         </div>
         <div class="childClass">
         </div>
         <div class="childClass">
         </div>
    </div>

我可以通过

获取数组中的所有父类对象

var pClassList= document.getElementsByClassName("parentclass");

我的问题是如何访问子类＆＃34; childClass＆＃34;来自pClassList数组，将其称为索引，如

var childClassList1= pClassList[0].getElementsByClassName("childClass");
var childClassList2= pClassList[1].getElementsByClassName("childClass");

Answer 1

只需循环遍历初始集合并使用每次迭代的索引来访问单个元素

var pClassList= document.getElementsByClassName("parentclass");

for(var i=0; i < pClassList.length; i++){

  var parentElement = pClassList[i];
  // do something to each parent as needed
  // access children of parent element
  var childClassList= parentElement.getElementsByClassName("childClass");
  // do something with `childClassList`
  for (var j= 0; j < childClassList.length; j++){
    var child = childClassList[j];
    // do something with each child here
  }
}

Answer 2

可能是：

var childClassList1= pClassList[0].getElementsByClassName("childClass")[0];
var childClassList2= pClassList[1].getElementsByClassName("childClass")[0];

我更喜欢使用JQuery，在这种情况下它会是。

var pClassList = $(".parentclass")
var childClassList1 = $(pClassList[0]).children().first() 
var childClassList2 = $(pClassList[1]).children().first()

Answer 3

以下内容将为pClassList数组中的第一个元素检索classname =“childClass”的子节点：

for (var i = 0; i < pClassList[0].childNodes.length; i++) {
if (pClassList[0].childNodes[i].className == "childClass") {
  //Do something with pClassList[0].childNodes[i]
}        
}

您可以对pClassList数组中的其余元素执行相同操作，方法是遍历每个元素。

Answer 4

另一种选择我认为你可以根据需要选择childClass：

var childClassList1= document.querySelector('.childClass:nth-child(2)');

如何从类列表对象中获取子元素？

4 个答案: