Question

我有一个数组，我正在尝试使用javascript编写一个函数来返回数组中图像标记的索引。我的代码中img和p是标记的地方共享同一个类。

const getClass = document.querySelectorAll('.grp1')
const intoArray = Array.from(getClass)
console.log(intoArray) ====>  [img.headPic.grp1,p.grp1,p.grp1]

我尝试使用indexOf('img')，但它返回-1，这意味着它无法在数组中找到它。

Answer 1

您可以迭代数组并检查每个元素的节点名称。 E.g。

var index = -1;
for (var i = 0; i < intoArray.length; i++) {
  if (intoArray[i].nodeName === 'IMG') {
    index = i;
    break;
  }
}

有各种方法可以迭代数组并获取所需的数据。如果Array#findIndex可用，请改用：

var index = intoArray.findIndex(function(element) { return element.nodeName === 'IMG'; });

您也可以直接查询该元素并使用indexOf：

var img = document.querySelector('img.grp1');
var index = Array.from(document.querySelectorAll('.grp1')).indexOf(img);

Answer 2

您目前正在寻找字符串而不是实例。 .indexOf('img')无法正常工作，因为您正在查找字符串"img"而不是实际的图像元素。您需要先通过类似document.querySelector('.headPic')

的内容进行查询

如果你拥有了图像实例，你确实可以通过indexOf在数组中搜索实例。 仅当数组实际上是数组时才支持！

大多数文档查询功能（document.getElementsByName，document.querySelectorAll等）返回所谓的NodeList。大多数类似数组的功能都是在那种对象（例如循环）上实现的，但不是全部。为了能够使用indexOf（filter，forEach，map），必须首先确保将对象转换为Array。

David Walsh详细介绍了如何here。

var nodesArray = Array.prototype.slice.call(document.querySelectorAll("div"))
上面代码的结果是一个真正的Array对象，其中包含QSA返回的所有节点。你甚至可以用这个替代方案缩短代码：
var nodesArray = [].slice.call(document.querySelectorAll("div"));

var el = document.querySelectorAll('.grp1');
var img = document.querySelector('.headPic');
// el.indexOf(img);
// this can't work right now because the object is still a NodeList at that point
var el_array = Array.prototype.slice.call(el);
var num = document.querySelector('.numIndex');

num.innerHTML = el_array.indexOf(img);

<p class="grp1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi.</p>
<p class="grp1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi.</p>
<img class="headPic grp1" src="http://placehold.it/200/300">
<p class="grp1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi.</p>
<p>Index of the image is <span class="numIndex"></span></p>

获取数组中图像标记的索引号

2 个答案: