("#div> tag").lenght输出错误的值

Question

我正在尝试为一个带有ID的项目设置一个计数器,但它每次输出错误的值,它实际上是一个正确的,但它只是巧合,因为其他一切都是错误的

<div id="foo">
<img ......>
<img ......>
<img ......>
</div>

那里有3个标签.所以这段代码

("#foo > img").length

应该输出"3",但它实际输出一个14到17之间的随机数

("#foo img").length
("#foo > img").length
("div#foo img").length
("div#foo > img").length

所有这些输出相同的错误行为.

我错过了什么吗？

Answer 1

JavaScript中的分组运算符由表达式周围的一组括号组成.在这种情况下,您在字符串周围使用分组运算符.这将返回计算表达式的结果,所以在的情况下("Foo"),"Foo"被返回.

通过分组运算符返回字符串,被访问的.length属性是字符串本身的属性,它将返回字符串本身的大小.

鉴于您的代码和问题,似乎您希望获得给定选择器匹配的元素数量.你可能正在寻找像querySelectorAll这样的东西:

document.querySelectorAll( "#foo > img" ).length;

此方法返回与选择器匹配的元素集合.该集合最终将包含一个length属性,该属性告诉您集合中包含多少元素.

请注意,上述方法不返回实时集合,这意味着它不会反映上次调用方法后添加或删除的元素.

其他功能返回实时集合,例如getElementsByTagName:

var collection = document.getElementById( "foo" ).getElementsByTagName( "img" );

在上面的示例中,即使总数在getElementsByTagName函数运行后发生更改,collection.length也始终会给出img元素#foo数量.