在html-collection中查找具有特殊src的图像

Question

我不知道我做错了什么。 我只想在src（例如-www.domain.com/images/apple-desktop/。。。）中包含“Apple”的页面的html集合中获取一个图像，然后检查它是否存在，然后执行一些操作。

var allimg;
var ilist = document.images;
for (var i = 0; i < ilist.length; i++) {
   if(ilist[i].src.includes('apple')) {
       allimg = true;
   } else {
       allimg = false;
   }
}

Answer 1

null

var allimg=false;
var appleImg ;
var ilist = document.images;
for (var i = 0; i < ilist.length; i++) {
   if(ilist[i].src.includes('apple')) {
       allimg = true;
       appleImg = ilist[i];
       break;
   } 
}
console.log(allimg);// will be false if there is no such img found
console.log(appleImg); // will be undefined it there is no image with apple as src

<img src="apple.jpg" alt="flower" width="150" height="113">
<img src="klematis2.jpg" alt="flower" width="152" height="128">
<img src="smiley.gif" alt="Smiley face" width="42" height="42">

Answer 2

要检查img是否在其src中包含关键字，可以使用querySelectorAll或querySelector与属性选择器组合。

null

console.log(
  document.querySelectorAll('img[src*=apple]').length
);

console.log(
  document.querySelectorAll('img[src*=orange]').length
);

<img src = '/lala/apple/lala' />
<img src = '/lala/banana/lala' />
<img src = '/lala/apple/lala' />

Answer 3

您应该删除else分支，因为它会在每次图像不匹配时将变量设置为false。 你也可以打破循环一旦你找到一个匹配的来源，以提高效率。

for (var i = 0; i < ilist.length; i++) {
   if(ilist[i].src.includes('apple')) {
       allimg = true;
       break;
   } 
}