javascript indexof()方法 获取当前点击标签的索引问题

这几天在看别人写的某段代码的时候自己一直理解不了这个,希望得到解释,谢谢

html结构如下

<div onclick="getClickIndex(e)" id="result">
    <div>1</div>
    <div>3</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>8</div>
</div>

js 代码

var data=[1,3,2,3,4,8];//#result的数据来自这
function getClickIndex(e) {
    var node = e.target;
    var nodearr=node.parentNode.children
    var index= data.indexOf.call(nodearr, node);
    return index;
}

上面能返回点击的标签 在#result 下的索引,主要是不明白 indexof.call()的结果为什么会是点击的那个索引,因为根据W3C 上面的解释,应该是返回第一次出现的索引。

下面是W3C的解释

首先谢谢各位的帮助,但是我还是有一点疑惑,indexof 是获取第一次出现的索引,当没有重复的元素还好理解,但是如上面的 如果出现重复了 他是怎么给indexof 第二个参数的检索位置的,其实那个检索位置就是索引吧。

首先,这里就是ArrayindexOf方法的使用,你看起来有些困惑估计是代码的写法问题。

你确定这段代码可以跑?按照下面的写法,在getIndexClick中的参数e应该是undefined,怎么去拿e.target?

onclick="getClickIndex()"

另外他就是要调用Array的indexOf,这样写感觉有困惑或者歧义,感觉index好像和data有关似得:

var data=[1,3,2,3,4,8];
//...
data.indexOf.call(nodearr, node);

完全可以这么写:

[].indexOf.call(nodearr, node);
// or
Array.prototype.indexOf.call(nodearr, node);
// or
var array = Array.prototype.slice.call(nodearr, 0); // 先转成数组
array.indexOf(node);    // 再调用数组的indexOf方法

因为你的node是e.target,是当前触发的元素

你找的这个indexof是string的indexof,和代码里的不是同一个,代码里是调用了数组Array中的indexof, 这个函数是用来查找元素在数组中的位置的 所以返回的是点击的元素的位置

  1. onclick="getClickIndex(event)",把event加上。

  2. 把函数改成这样就看得懂了:

    function getClickIndex(e) {
      var node = e.target //目标div
      var nodeCollection = node.parentNode.children //所有子div的集合,类数组
      var nodeArr = Array.from(nodeCollection) //把类数组转成数组
      var index = nodeArr.indexOf(node) //拿到index
      return index;
    }
  3. nodeArr里面的元素都是不一样的节点,点击的节点也是唯一的,所以不会有重复。

  4. 你贴的那个图是字符串的indexOf方法,虽然用法和数组的基本一样,但是这里是在用Array.prototype.indexOf方法。

  • 怎么将一个字符串a:1,b:xxx,中的value的值分别加上引号?
  • .closest()怎样获取指定的input中的输入值?
  • JS document.execCommand 富文本 命令自己写的完全不行,请问这是什么情况啊?
  • Android 版微信 webview 网页 filereader readAsDataURL 时不触发 onload 事件
  • 关于使用animate.css库添加动画的问题
  • 本地正常的网页放到 pages 上不正常?
  • JQuery的append方法,图和代码如下:如果有更好的办法能实现我的需求也欢迎大家的建议!!!
  • 网页qq的消息提醒怎么实现的?
  • 作用域内赋值时出现 TypeError: Cannot read property ‘value’ of undefined
  • 如何获取chrome开发者工具选定到某个元素时,显示的那个尺寸?
  • JavaScript中遍历数组的方式:forEach 相对于 for 有什么优势◔ ‸◔?