Question

我想要的是使用javascript计算div中包含名称empty.jpg的src的数量。以下是代码示例：

<div id="up-bil">
<input name="billed" type="checkbox" value="" />
<img src="Lighthouse.jpg"/>
<input name="billed" type="checkbox" value="" />
<img src="Lighthouse.jpg" />
<input name="billed" type="checkbox" value="" />
<img src="images.jpg" />
</div>

<script type="text/javascript">
   var b = document.getElementById("up-bil").getElementsByTagName("img");
   b.getAttribute("src")=="empty.jpg";
   alert(b.length);
</script>

此代码没有任何反应。有人能告诉我该做什么吗？

Answer 1

getElementsByTagName返回一个集合，因此您必须进行迭代，并检查每个元素，然后递增一个计数器：

var elems = document.getElementById("up-bil").getElementsByTagName("img");
var count = 0;
for (var i = 0; i < elems.length; i++) {
    if (elems[i].src == "empty.jpg") count++;
}
console.log(count);

如果您可以访问document.querySelectorAll，则可以执行以下操作：

var elems = document.querySelectorAll("#up-bill img[src='empty.jpg']");
console.log(elems.length);

Answer 2

var imgs = document.getElementById("up-bil").getElementsByTagName('img');
var howMany = 0;
for(var i = 0; i < imgs.length; i++) {
 var currentSrc = imgs[i].getAttribute('src');
 if(currentSrc.indexOf("empty.jpg")>0)howMany++; 
}
console.log(howMany);

这会检查整个src是否为empty.jpg

Answer 3

这里有两个主要问题：

getElementsByTagName()将返回一个集合，您必须迭代它。
b.getAttribute("src")=="empty.jpg";不会做任何事情，你在这里没有测试任何东西。

您的代码应该是这样的：

var counter = 0;
for (var img in document.getElementById("up-bil").getElementsByTagName('img')) {
    if (img.src === "empty.jpg") counter++; // use === to compare and to assure value and type equality.
}

显示div中特定图像的数量

3 个答案: