Question

我有一组<li>项：

<ul id="listings">
<li id="item-0">
  <div class="content">hi</div>
<li>
<li id="item-1">
  <div class="content">hi</div>
<li>
<li id="item-2">
  <div class="content">hi</div>
<li>
</ul>
//etc

我的问题是：如何确定点击的<li>项目的索引号？。就像我点击：<li id="item-1">我想知道它是第二个<li>索引。

我可以通过以下方式轻松确定所有<li>的总长度：

document.querySelectorAll('#listings li').length;

我目前有以下点击监听器：

document.getElementById("listings").addEventListener("click", function(e) {
    if(e.target && e.target.nodeName == "LI") {
        console.log(e.target.id + " was clicked");
    }
});

Answer 1

<ul id="listings">
  <li id="item-0" onclick="isClicked(0)">
    <div class="content">hi</div>
  </li>
  <li id="item-1" onclick="isClicked(1)">
    <div class="content">hi</div>
  </li>
  <li id="item-2" onclick="isClicked(2)">
    <div class="content">hi</div>
  </li>
//...

我会向li添加一个onclick函数。使用javascript，您可以收集数据。

function isClicked(number){
   alert("Clicked element: "+ number);
}

Answer 2

var ulLength = document.getElementById('listings');
var elements = [].slice.call(ulLength.childNodes);
//[].slice.call() is used to convert array-like objects/collections into an array

function getSiblings() {
    var _s = [];
    elements.forEach(function (i, d) {
        if (i.nodeType === 1) //prevents text nodes to be counted as siblings
        _s.push(i);
    });

    return _s;
}

function getElmIndex(elm) {
    var _siblings = getSiblings();
    for (var i = 0; i < _siblings.length; i++) {
        if (!(_siblings[i] && _siblings[i] !== elm)) {
            return i;
        }
    }
}

elements.forEach(function (elm, d) {
    elm.addEventListener("click", function (e) {
        var _index = getElmIndex(this);

        alert("Index: " + _index);
    });
});

Fiddle Link

Answer 3

如果使用Jquery不是问题，我建议使用index()方法：http://jsfiddle.net/JLkPs/。

来源：http://api.jquery.com/index/

确定<li>项目单击</li>的.length索引

3 个答案: