Getting Index of Item in List coming from Array

Question

I have this array:

var names = [
    "Name1",
    "Name2",
    "Name3"
];

I converted this to Unorder List for HTML:

for(i = 0; i < names.Length; i++){
    text += "<li>" + names[i] + "</li>";
}
text += "</ul>";


document.getElementById("choices").innerHTML = text;

Now, I got this:

Name1
Name2
Name3

And I am happy with the result. But now I want if someone click on Name2 so it alert me the index of the value. What I want is it should in Mobile App (Cordova) so that when user click on List Item it will show details on other activity (Some other page).

PS: I checked:

var index = $( "li" ).index( this );

and

var index = $("ul li.active").index();

But seems like these are not made for me.

May be I should Dynamically assign ID's to each <li> item? What should I do now?

I was making one more mistake as well: `$("#choices").click(function() { // choices is the DOM element that has my all the

score 1 · Answer 1 · answered Feb 15 '17 at 06:29

1

$( "li" ).index will return elements index with respect to all li elements in DOM.

You need to use .index() with jquery object of clicked element. It will return the elements index in its parent container:

var index = $(this).index();

answered Feb 15 '17 at 06:29

Milind Anantwar

81,290
25
94
125

Mairaj Ahmad · Accepted Answer · 2017-02-15T06:54:54.810

1

You can directly get index using index method.

$("li").click(function () {
  alert($(this).index());
});

If you have multiple ul elements on page and you want to bind click event to some specific element you can do this.

To bind click on element by id

$("#YourUlId li").click(function () {
      alert($(this).index());
});

To bind click event by class

$(".YourUlClass li").click(function () {
      alert($(this).index());
});

edited Feb 15 '17 at 06:54

answered Feb 15 '17 at 06:31

Mairaj Ahmad

14,434
2
26
40

1
I just have one question: **What if I have multiple `
– fWd82 Feb 15 '17 at 06:44
1

You can bind click function to specific `ul li` by `id` or `class` – Mairaj Ahmad Feb 15 '17 at 06:46
1

Like `$("#YourUlId li").click` – Mairaj Ahmad Feb 15 '17 at 06:47

score 1 · Answer 3 · answered Feb 15 '17 at 06:32

1

Pass the id dynamically in for loop

for(i = 0; i < names.Length; i++){
    text += "<li id="+i+">" + names[i] + "</li>";
}

assign the click event, u will get the id by below code

$(li).click(function(){
   alert($(this).attr("id"));
});

answered Feb 15 '17 at 06:32

Naresh Kumar

938
5
12

Genius, +1 for `text += "
" + names[i] + "

fWd82

Feb 15 '17 at 06:54

Abana Clara · Answer 4 · 2017-02-15T06:42:24.723

1

Using native javascript, you can just create a function that will alert the index of the array value corresponding the li element value/id

First you attach the function on the choices

document.getElementById('Name2').setAttribute('onclick','checkIndex(this)');

then loop through the array and hunt for the matching array value

function checkIndex(item){
  for(i=0;i<names.length;i++){
    if(names[i] == item.innerHTML){ //or item.id
      alert(names.indexOf(names[i]));
    }
  }
}

edited Feb 15 '17 at 06:42

answered Feb 15 '17 at 06:32

Abana Clara

4,602
3
18
31

Thank You for the answer. I pick an idea from it. Though I do it with `Array` and not with `DOM
s`.

fWd82

Feb 15 '17 at 06:47

1

Glad you got an idea – Abana Clara Feb 15 '17 at 06:54

score 1 · Answer 5 · answered Feb 15 '17 at 06:32

1

use this for getting the current element

<ul>
<li>Male</li>
<li>Female</li>
</ul>

 <script>
$("li").click(function(){
 alert($(this).index())
})
 </script>

answered Feb 15 '17 at 06:32

geekbro

1,293
12
13

Very easy to understand. Thank You. :) – fWd82 Feb 15 '17 at 06:50

score 1 · Answer 6 · answered Feb 15 '17 at 06:33

1

See below working snippet

var names = [
    "Name1",
    "Name2",
    "Name3"
];
var text='<ul>';
for(i = 0; i < names.length; i++){
    text += "<li>" + names[i] + "</li>";
}
text += "</ul>";
document.getElementById("choices").innerHTML = text;

$('li').on('click',function(){
  alert($(this).index())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="choices"></div>

answered Feb 15 '17 at 06:33

Bharat

2,441
3
24
36

Thank You. +1 for Complete Code Snippet. – fWd82 Feb 15 '17 at 06:56

score 0 · Answer 7 · answered Feb 15 '17 at 07:27

I would handle it in a declarative way, using html data-attributes, handled by jquery. see here

Here's an example.

var names = ["jack", "mary", "lou", "andrew"];
var text = "<ul>";
for (var i = 0; i < names.length; i++) { 
  text += "<li data-id='" + i + "'>" + names[i] + "</li>";
}
text += "</ul>";
document.getElementById("choices").innerHTML = text;

$("li").click(function(e){
   alert($(this).data("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  My Choice
  <div id="choices"></div>
</body>

</html>

Of course you can change data-id with whatever you want, or either add other attributes (data-page ? data-txt ? ) and handle all this in a proper way.

Also, dynamically assign ids to your list is a possibility, but I prefer this because I find it more flexible.

Getting Index of Item in List coming from Array

7 Answers7