2

I have a set of <li> items:

<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

My question is: How do I determine the index number of the clicked <li> item?. Like if I click: <li id="item-1"> I want to know it's the second <li> index.

I can easily determine the total lenght of all <li>'s by doing:

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

And I currently have the following click listener:

document.getElementById("listings").addEventListener("click", function(e) {
    if(e.target && e.target.nodeName == "LI") {
        console.log(e.target.id + " was clicked");
    }
});
user1231561
  • 3,239
  • 6
  • 36
  • 55
  • So you're saying that their `id` attributes won't always be in the correct order? Otherwise, you could just use string manipulation to extract the number from the `id`. – Lix Feb 22 '14 at 13:53
  • 1
    yea thought of that - but cant rely on the id order :/ – user1231561 Feb 22 '14 at 13:55
  • 1
    http://stackoverflow.com/questions/8801787/get-index-of-clicked-element-using-pure-javascript – Kiran Feb 22 '14 at 14:05

3 Answers3

0
<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>
//...

I would add an onclick function to the li. Using javascript you can collect the data.

function isClicked(number){
   alert("Clicked element: "+ number);
}
Mark
  • 3,224
  • 2
  • 22
  • 30
0
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

painotpi
  • 6,894
  • 1
  • 37
  • 70
  • Hi Tarun Pai - thanks for contributing. It seems if any html elements are added to the
  • (like a
    ) then the click will turn up undefined. Can that be taken into account with the above functions?
    • – user1231561 Feb 22 '14 at 20:14
  • Well you can change that by altering the `node` variable, but it'll behave more like a hack; will need some time to build a generic solution. – painotpi Feb 22 '14 at 20:16
  • @user1231561 if it's not mandatory for you to attach the event to the `ul#listings` it get's easier. – painotpi Feb 22 '14 at 20:21