js前端开发，如何点击元素在同类元素中的位置排序索引？

JS前端开发

【需求】

为同一类（class）元素绑定同一个点击事件；

在点击这些元素的时候，获取到点击元素在这些元素中的排序；

【方案】

创建一个HTML实验模型，实验对象为模型中绑定item类的<li></li>元素；

<ul id="list">
    <li class="item">0</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
 </ul>

通过js，为实验模型中的<li></li>元素绑定一个click事件函数clickItem

$('.item').bind("click", clickItem);

定义click事件函数clickItem，并且需要在clickItem函数打印出点击元素在这些元素中的排序（索引）

function clickItem(){
    let els = Array.from($('.item'))
    let this_index = els.indexOf(this)
    console.log(this_index)
}

【分析】

其实，要获取点击元素在同类元素中的排名索引其实很简单，

通过$('.item')即可获取所有同类元素，

再通过Array.from($('.item'))，即可将相关元素转化为一个普通数组，

最后，通过els.indexOf(this)即可获取点击元素在同类元素中的排名/索引；

【注意】

通过$('.item')获取的结果，虽然也能通过数字索引获取到相关元素，但它本质上其实并非真正的数组，而是一个对象，所以如果不将它转化为一个数组，indexOf()方法是不会生效的，而Array.from()的作用就是将这个对象转化为数组，以便于获取到排名/索引。