获取课程索引

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

代码片段

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返回一个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>

UPDATE

谢谢你的回答!我想创建一个我可以在任何地方使用的函数,这意味着,不是特定于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.