Question

我试图获取类中元素的索引。例如，如果我有一个名为myClass的类，其中包含5个元素，而第四个元素的id为fourth，我希望从类中获取#fourth的索引号。

我尝试使用indexOf这样：

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

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

但是我收到一个错误说：

未捕获的TypeError：myClass.indexOf不是函数

JSFiddle

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

代码段

＆＃13;

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)]);

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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

此处修复了自定义功能：

＆＃13;

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)]);

＆＃13;

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

＆＃13;

更新

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

这是您功能的最优化版本：

＆＃13;

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));

＆＃13;

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

＆＃13;

更新2

没有收集参数，有没有办法做到这一点？例如，有没有办法从id中获取类？

＆＃13;

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));

＆＃13;

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

＆＃13;

请注意.className，因为如果节点有一个类，它将正常工作。如果您期望更多，则需要从className或classList中提取常用的。

Answer 2

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 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));

获取课程

JSFiddle

JSFiddle

3 个答案:

更新

更新2