("#div > tag").length 输出错误值 [关闭]答案

【问题标题】：("#div > tag").lenght outputing wrong value [closed]("#div > tag").length 输出错误值 [关闭]
【发布时间】：2015-08-12 23:58:15
【问题描述】：

我正在尝试在带有 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

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

我错过了什么吗？

【问题讨论】：

("#foo > img").length 等价于 "#foo > img".length，它获取 字符串 "#foo > img" 的长度。该字符串有 10 个字符，因此结果为 10。您似乎打算调用一个函数并将字符串作为选择器传递？如果是这样，你想调用哪个函数？ foo(...) 和 (...) 是两个截然不同的东西。
这可能会有所帮助。 stackoverflow.com/questions/7404544/…

【解决方案1】：

JavaScript 中的Grouping Operator 由一组围绕表达式的括号组成。在这种情况下，您在字符串周围使用分组运算符。这将返回表达式的计算结果，因此在("Foo") 的情况下，返回"Foo"。

随着分组运算符返回字符串，the .length property被访问的是字符串本身，它将返回字符串本身的大小。

鉴于您的代码和问题，您似乎希望获得与给定选择器匹配的元素数量。您可能正在寻找类似querySelectorAll:

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

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

请注意，上述方法不会返回 live 集合，这意味着它不会反映在最后一次调用该方法之后添加或删除的元素。

实时集合由其他函数返回，例如getElementsByTagName：

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

在上面的例子中，collection.length 将总是给出#foo 中img 元素的数量，即使在 getElementsByTagName 函数之后总数发生了变化已经运行了。

【讨论】：