Question

我正在尝试仅获取具有特定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。

Answer 1

两个错误

如果语句缺少花括号
src是相对URL，因此您需要将其添加到支票中

当然，添加这样的静态URL检查是一个坏主意，因此请使用注释中提到的getAttribute或执行/ split

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>

Answer 2

我很确定您可以使用：

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

我检查了一下，就可以了。

希望这会有所帮助！

Answer 3

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

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

这样使用：

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

Answer 4

您假设Javascript中的src的值与您在HTML中放入src属性的字符串相同。 Javascript已将其扩展为具有协议和域的完全可识别的URL。您必须分开src，以便可以抓住 just 放在其中的最后一部分。然后根据您定位的路径进行评估。

这是进行简单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>

Answer 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>

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

5 个答案: