javascript - 访问 div 的所有图像并显示未定义或没有 src 的图像的计数

Question

我想访问特定 div 中的所有图像，例如

<div id="mydiv">
 <div id="mydiv1">
  <img  src="pic.jpg">
  <img  src="pic.jpg">
  <img  src="">`enter code here`
 </div>
 <div id="mydiv2">
  <img href="#">
  <img  src="pic.jpg">
  <img  src="">
 </div>
</div>

它是一个动态页面，我需要做的是从此 div 获取所有图像的 src 并检查哪个图像在其 src 中没有图像链接，并根据此显示警报

我是java脚本新手，请帮帮我。

Answer 1

var imgs = document.getElementById('mydiv').getElementsByTagName('img');
var countImagesWithoutSrc = 0;

var curImg;
for(var i = 0; i < imgs .length; i++) {
  curImg = imgs[i];

  if(!curImg.src || !curImg.src.length) {
    ++countImagesWithoutSrc;
  }
}

alert(countImagesWithoutSrc); //gives you the number of images missing a src attribute

Answer 2

var images = document.getElementById('mydiv').getElementsByTagName('img');
var emptyimg = [];
for(var i = 0; i < images.length; i++){
    if(images[i].src=="")
        emptyimg.push(images[i]);
}

引用您的评论：

是的，我需要计算空白 src 图像

要查找具有空 src 属性的图像的数量：

var count = 0
for(var i = 0; i < images.length; i++){
    if(images[i].src)
        count++;
}

Answer 3

首先添加 jQuery 库并写下以下代码以找出图像数量。

var imageCount = 0;
$(document).ready(function(){
   $('div').children('img').each(function(index,item){
       if($(this).attr('src') == "" || $(this).attr('src') == undefined)
       {
           count++;
       }
   });
   alert(count);
});

如果您仅使用 javascript，请使用以下代码：-

 for(j=0;j < document.getElementsByTagName('img').length;j++)
                {
                    if(document.getElementsByTagName('img')[j].getAttribute('src') == "")
                    {
                        count++
                    }

                }

请检查并让我知道这是否行不通，或者您是否想要除此之外的其他东西。

问候杜尔加普拉萨德

Answer 4

您的 html 代码不是很清楚，除非它们是带有 html 扩展名的 jpeg 文件，否则您不能将带有 html 文件的 img 作为源

<img src="somepage.html">

如果你想链接它们，你需要和锚标签
，这
<a href="somepage.html" ><img src="picsrc.jpg"></a>
可能是它的原因

Answer 5

首先了解 jQuery，您可以在其中使用如下内容：

$('img').each(function(index) {
    alert(index + ': ' + $(this).text());
});