Question

单击时，我需要在无序列表中找到列表元素的编号。如果没有JQuery，我将如何做到这一点？

<ul>
    <li><span>*</span>Cat</li>
    <li><span>*</span>Dog</li>
    <li><span>*</span>Avocado</li>
</ul>

例如，点击'Cat'会给我0，点击'Dog'会给我1，点击'Avocado'会给我2。

Answer 1

没有任何框架，试试这个：

<html>
<head>
<script>
function init(){
l =document.getElementById('myList');
items = l.getElementsByTagName('li');
for(i=0;i<items.length;i++){
    items[i].i = i;
    items[i].onclick = myAlert; 
}
}

function  myAlert() {
alert(this.i)
}
</script>
</head>
<body onload='init()'>
<ul id='myList'>
 <li><span>*</span>Cat</li>
 <li><span>*</span>Dog</li>
 <li><span>*</span>Avocado</li>
</ul>
</body>
</html>

JsFiddle

Answer 2

通常的技巧是找到点击来自的LI，获取其父级UL并循环遍历LI子级以找到主题LI：

<ul id="ul0">
  <li><span>first</span>
  <li><span>second</span>
  <li><span>third</span>
</ul>

<script>

document.getElementById('ul0').addEventListener('click', showIndex, false);

function showIndex(event) {
  var index;
  var element = event.target;

  if (element.tagName.toLowerCase() != 'li') {
    element = upTo('li', element);
  }

  if (element) {
     index = getIndex(element);
  }
  console.log(index);
  return index;
}

// Get the index of an LI in a UL
// Index is zero based
function getIndex(li) {
  var ul = li.parentNode;
  var node;
  var nodes = ul.childNodes;

  // Traverse child nodes, counting LIs until element found
  for (var i=0, j=0, iLen=nodes.length; i<iLen; i++) {
    node = nodes[i]

    if (node.tagName && node.tagName.toLowerCase() == 'li') {

      if (node == li) {
        return j;
      }
      j++;
    }
  }
  return null;  
}

// Start from root and find ancestor with tagName
// Returns undefined if element not found
function upTo(tagName, root) {

  if (!root) return;
  tagName = tagName.toLowerCase();

  while (root.parentNode) {
    root = root.parentNode;

    if (root.tagName && root.tagName.toLowerCase() == tagName) {
       return root;
    }
  }
}
</script>

这也可以通过查看LI的父级是否为OL来处理OL中的LI，如果是，则只返回li.value。

在无序列表中查找li元素的编号

2 个答案: