如何在图像数组中获取特定的按钮 ID答案

【问题标题】：how to get a specific button id in an array of images如何在图像数组中获取特定的按钮 ID
【发布时间】：2019-05-09 11:20:20
【问题描述】：

我试图仅获取数组中具有 srcA 的特定 src 的图像的父按钮 ID。任何帮助表示赞赏。

var images = document.getElementById('con').getElementsByTagName('img');
var myImg = [];
for (var i = 0; i < images.length; i++) {
  if (images[i].src == "srcA")
    myImg.push(images[i]);
  alert(images[i].parent.id);
}

<div id="con">
  <button id="ba"><img id="sa" src="srcA"></button>
  <button id="bb"><img id="sb" src="srcB"></button>
  <button id="bc"><img id="sc" src="srcC"></button>
  <button id="bd"><img id="sd" src="srcD"></button>
  <button id="be"><img id="se" src="srcE"></button>
  <button id="bf"><img id="sf" src="srcF"></button>
</div>

我收到一个错误 images[i].parent 未定义

请不要使用 jQuery。

【问题讨论】：

document.querySelector('#con img[src="srcA"]')
试试parentNode（不是parent）
@Scrimothy parentNode 确实返回了 id。谢谢你，但它仍然返回整个数组，而不仅仅是特定的源。我试图为包装特定图像源的按钮获取一个 id。
Getting the parent div of element的可能重复
@HereticMonkey 警报问题是次要的，主要问题是if 没有包装两个命令和.src 产生完整的URL。所以不是重复的imo。

标签： javascript html arrays

【解决方案1】：

两个错误

If 语句缺少大括号
src 是相对 URL，所以你需要将其添加到支票中

当然，像这样添加静态 URL 检查是个坏主意，所以要么使用 cmets 中提到的 getAttribute，要么执行 / 拆分

var images = document.getElementById('con').getElementsByTagName('img');
var myImg = [];
for(var i = 0; i < images.length; i++){
if(images[i].src === "https://stacksnippets.net/srcA"){
  myImg.push(images[i]);
  alert(images[i].id);
 }
}

<div id="con">
<button id="ba"><img id="sa" src="srcA"></button>
<button id="bb"><img id="sb" src="srcB"></button>
<button id="bc"><img id="sc" src="srcC"></button>
<button id="bd"><img id="sd" src="srcD"></button>
<button id="be"><img id="se" src="srcE"></button>
<button id="bf"><img id="sf" src="srcF"></button>
</div>

【讨论】：

或使用images[i].getAttribute("src") == "srcA"，否则这是正确解决问题代码问题的唯一答案。
这非常接近我想通了添加@Chris G's images[i].getAttribute("src") == 而不是 images[i].src === 和 alert(images[i ].parentNode.id) 到警报，我会标记它是正确的。 Chris G 是对的，这个答案最接近问题。谢谢大家的帮助。

【解决方案2】：

我很确定你可以使用：

var imgSRCAParent = document.querySelector("img[src='srcA']").parentElement;

我检查了它，它有效。

希望对你有帮助！！！

【讨论】：

【解决方案3】：

您必须结合 querySelector 和父级的属性。

function findParent (source) {
  return document.querySelector("#con button img[src="+source+"]").parentElement.id;
}

这样使用：

findParent("srcA"); // its return "ba"

【讨论】：

【解决方案4】：

您假设 Javascript 中 src 的值与您放入 HTML 中 src 属性的字符串相同。 Javascript 已经将其扩展为一个完全可识别的 URL，其中包含协议和域。您必须将src 分开，以便您可以仅获取您放入其中的最后一部分。然后根据您的目标路径进行评估。

这是进行简单的console.log() 调试的好地方。

var images = document.getElementById('con').getElementsByTagName('img');
var myImg = [];
for(var i = 0; i < images.length; i++){
  const path = images[i].src.split('/');
  const lastStop = path[path.length - 1];
  if(lastStop == "srcA") {
    myImg.push(images[i]);
    alert(images[i].parentNode.id);
  }
}

<div id="con">
<button id="ba"><img id="sa" src="srcA"></button>
<button id="bb"><img id="sb" src="srcB"></button>
<button id="bc"><img id="sc" src="srcC"></button>
<button id="bd"><img id="sd" src="srcD"></button>
<button id="be"><img id="se" src="srcE"></button>
<button id="bf"><img id="sf" src="srcF"></button>
</div>

【讨论】：

【解决方案5】：

var images = document.getElementById('con').getElementsByTagName('img');
var myImg = [];
for(var i = 0; i < images.length; i++){
if(images[i].getAttribute("src") == "srcA"){
  myImg.push(images[i]);
  alert(images[i].parentNode.id);
 }
}

<div id="con">
<button id="ba"><img id="sa" src="srcA"></button>
<button id="bb"><img id="sb" src="srcB"></button>
<button id="bc"><img id="sc" src="srcC"></button>
<button id="bd"><img id="sd" src="srcD"></button>
<button id="be"><img id="se" src="srcE"></button>
<button id="bf"><img id="sf" src="srcF"></button>
</div>

【讨论】：

我在 John 和 Chris G 的帮助下弄明白了。谢谢。