获取类索引

Question

我正在尝试获取类中元素的索引。例如，如果我有一个名为 myClass 的类，它有 5 个元素，并且第四个元素的 id 为 fourth，我想从该类中获取 #fourth 的索引号。

我尝试像这样使用indexOf：

var myClass = document.getElementsByClassName('myClass');
var fourth = document.getElementById('fourth');

console.log(myClass.indexOf(fourth));

但我收到一条错误消息：

未捕获的类型错误：myClass.indexOf 不是函数

JSFiddle

代码片段

var myClass = document.getElementsByClassName('myClass');
var fourth = document.getElementById('fourth');

console.log(myClass.indexOf(fourth));

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass" id="fourth"></div>
<div class="myClass"></div>

然后我尝试创建自己的函数来从类中获取索引：

function indexInClass(node) {
    var className = node.className;
    var num = 0;
    for (var i = 0; i < className.length; i++) {
        if (className[i] === node) {
            return num;
        }
        num++;
    }
    return -1;
}

但是当我使用它时我会变得不确定。

如何获取类的索引？

JSFiddle

代码片段

var myClass = document.getElementsByClassName('myClass');
var fourth = document.getElementById('fourth');

function indexInClass(node) {
  var className = node.className;
  var num = 0;
  for (var i = 0; i < className.length; i++) {
    if (className[i] === node) {
      return num;
    }
    num++;
  }
  return -1;
}

console.log(myClass[indexInClass(fourth)]);

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass" id="fourth"></div>
<div class="myClass"></div>

Answer 1

getElementsByClassName 返回一个HTMLCollection，它没有indexOf 数组方法。

如果你可以访问Array.from，那么简单的解决方案是使用它将集合转换为数组并调用indexOf：

Array.from(document.getElementsByClassName('myClass'))
    .indexOf(fourth); //3

如果你不能使用Array.from，那么Array.prototype.slice.call 应该可以工作：

Array.prototype.slice.call(document.getElementsByClassName('myClass'))
    .indexOf(fourth); //3

Answer 2

getElementsByClassName 返回一个 HTML 集合，而不是一个数组，因此您不能在其上使用 indexOf。

迭代元素是要走的路，但你的自定义函数的问题是这样的：

for (var i = 0; i < className.length; i++) {

您正在迭代 className，这是一个包含 node 的类名的字符串，而您应该迭代您的元素集合 myClass。

这是您的自定义函数已修复：

var myClass = document.getElementsByClassName('myClass');
var fourth = document.getElementById('fourth');

function indexInClass(node) {
  var className = node.className;
  var num = 0;
  for (var i = 0; i < myClass.length; i++) {
    if (myClass[i] === node) {
      return num;
    }
    num++;
  }
  return -1;
}

console.log(myClass[indexInClass(fourth)]);

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass" id="fourth"></div>
<div class="myClass"></div>

---

更新

感谢您的回答！我想创建一个可以在任何地方使用的函数，意思是，不特定于 myClass。我怎样才能做到这一点？

这是你的函数的一个稍微优化的版本：

function indexInClass(collection, node) {
  for (var i = 0; i < collection.length; i++) {
    if (collection[i] === node)
      return i;
  }
  return -1;
}

var myClass = document.getElementsByClassName('myClass');
var fourth = document.getElementById('fourth');

alert("The ID is: " + indexInClass(myClass, fourth));

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass" id="fourth"></div>
<div class="myClass"></div>

---

更新 2

有没有办法在没有集合参数的情况下做到这一点？例如，有没有办法从 id 中获取类？

function indexInClass(node) {
  var collection = document.getElementsByClassName(node.className);
  for (var i = 0; i < collection.length; i++) {
    if (collection[i] === node)
      return i;
  }
  return -1;
}

var fourth = document.getElementById('fourth');

alert("The ID is: " + indexInClass(fourth));

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass" id="fourth"></div>
<div class="myClass"></div>

小心.className，因为如果节点有一个类，它会正常工作。如果您期望更多，则需要从className 或classList 中提取共同的。

Answer 3

您的自定义函数有正确的想法，您只是在迭代错误的变量。 Fiddle

var myClass = document.getElementsByClassName('myClass');
var fourth = document.getElementById('fourth');

function indexInClass(node) {
    var className = node.className;
    var num = 0;
    for (var i = 0; i < myClass.length; i++) {
        if (myClass[i] === node) {
            return num;
        }
        num++;
    }
    return -1;
}

console.log(indexInClass(fourth));