javascript 如何统计父类的子元素数量

xsuvu9jc  于 2023-01-04  发布在  Java
关注(0)|答案(6)|浏览(257)

我也有类似的东西。

function myFunction() {
  var c = document.getElementById("myID").childElementCount;
  alert(c);
}

有办法做这样的事吗?

function myFunction() {
  var c = document.getElementsByClass("myClass").childElementCount;
  alert(c);
}
doinxwow

doinxwow1#

没有getElementByClass,但有getElementsByClassName。但是,它返回元素的集合,因为可以有多个元素具有相同的类。但是,ID限制为每个文档一个。
因此,如果知道集合中元素的索引,就可以执行以下操作:

var els = document.getElementsByClassName('myClass');
var c = els[0].childElementCount;
alert(c);
tcbh2hod

tcbh2hod2#

document.getElementsByClassName返回一个HTMLCollection(而不是一个Element),HTMLCollection可以通过[...x]语法轻松转换为数组。
因此,如果您想要所有.myClass父元素中的子元素的总和:

[...document.getElementsByClassName('myClass')]
  .reduce((sum, parent) => sum += parent.childElementCount, 0);

document.querySelector[All]还有更新、更简洁的函数:

[...document.querySelectorAll('.myClass')]
  .reduce((sum, parent) => sum += parent.childElementCount, 0);
oprakyz7

oprakyz73#

@evolutionxbox有工作答案,即使它是一个评论。@evolutionxbox请使您的评论成为一个答案,以便我可以标记您的正确。
这个管用。

function myFunction() {
  var c = document.getElementsByClassName('myClass').length;
  alert(c);
}
ijnw1ujt

ijnw1ujt4#

如果您想计算某个className的所有子级,您可以这样做:

function countAllChildren(selector){
  let i = 0, q = document.querySelectorAll(selector);
  for(let n of q){
    i += n.children.length;
  }
  return i;
}
countAllChildren('.myClass');
deikduxw

deikduxw5#

您可以使用jquery来实现这一点:

var count = $("#myID").children().length;
dw1jzc5e

dw1jzc5e6#

在父元素上使用childElementCount,如下所示-

document.getElementsByClassName('myClass')[0].childElementCount

相关问题