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

Question

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

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

您应该删除else分支，因为每次图像不匹配时，它都会将变量设置为 false。一旦找到更有效的匹配源，您也可以跳出循环。

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

Answer 2

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

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' />

现在只检查是否有任何可用于querySelector()检索第一个匹配元素（或 null）并将结果转换为布尔值：

var allimg = !!document.querySelector('img[src*=apple]');

或留下querySelectorAll()并使用它length：

var allimg = !!document.querySelectorAll('img[src*=apple]').length;

要重用匹配的元素，您可以querySelectorAll()与forEach().

document.querySelectorAll('img[src*=apple]').forEach(function(item){
  item.style.border = '10px solid red'
});

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

Answer 3

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 4

如果您与苹果有超过 1 个链接，并且您想遍历所有链接并对它们做一些事情，这应该可以工作。

var allimg;
var ilist = document.getElementsByTagName("img");

for (var i = 0; i < ilist.length; i++) {
   if(ilist[i].src.includes('apple')) {
       allimg = true;
     ilist[i].style.border = '1px solid red'
     //do something with the item
   } else {
       allimg = false;
   }
  console.log(allimg)
}

在这个例子中，与苹果的链接将得到红色边框，其余的则没有。

这是一个工作代码笔，例如 https://codepen.io/Elnatan/pen/WNwQjMq