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?

You really should make it as '<li onclick="doStuff(' + i + )"'>... as this way you don't need to do anything — Akxe
– Akxe, Commented Feb 15, 2017 at 6:36
I was making one more mistake as well: $("#choices").click(function() { // choices is the DOM element that has my all the <li>s. var index = $(this).index(); $("span").text( "Index is: #" + index ); }); | #choices was <div> I should use <li> instead of #choices <div> — fWd82
– fWd82, Commented Feb 15, 2017 at 6:40
If I am losing lot of reputation because of this post I will delete it. I think the problem is well discussed bellow so you should not downvote it. May be other users got it helpful. Thank You. — fWd82
– fWd82, Commented Feb 15, 2017 at 7:03

Mairaj Ahmad · Accepted Answer · 2017-02-15 06:54:54Z

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, 2017 at 6:54

answered Feb 15, 2017 at 6:31

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fWd82 Over a year ago

I just have one question: What if I have multiple <ul> in same context or file.?

Mairaj Ahmad Over a year ago

You can bind click function to specific ul li by id or class

Mairaj Ahmad Over a year ago

Like $("#YourUlId li").click

Milind Anantwar · Accepted Answer · 2017-02-15 06:29:27Z

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, 2017 at 6:29

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Naresh Kumar · Accepted Answer · 2017-02-15 06:32:36Z

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, 2017 at 6:32

Naresh Kumar

9235 silver badges12 bronze badges

1 Comment

fWd82 Over a year ago

Genius, +1 for text += "<li id="+i+">" + names[i] + "</li>"; Thank You.

geekbro · Accepted Answer · 2017-02-15 06:32:59Z

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, 2017 at 6:32

geekbro

1,33312 silver badges14 bronze badges

1 Comment

fWd82 Over a year ago

Very easy to understand. Thank You. :)

Bharat · Accepted Answer · 2017-02-15 06:33:59Z

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, 2017 at 6:33

Bharat

2,4643 gold badges28 silver badges37 bronze badges

1 Comment

fWd82 Over a year ago

Thank You. +1 for Complete Code Snippet.

Potato Salad · Accepted Answer · 2017-02-15 06:42:24Z

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, 2017 at 6:42

answered Feb 15, 2017 at 6:32

Potato Salad

4,6603 gold badges22 silver badges33 bronze badges

2 Comments

fWd82 Over a year ago

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

Potato Salad Over a year ago

Glad you got an idea

Massimo Petrus · Accepted Answer · 2017-02-15 07:27:46Z

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.

Collectives™ on Stack Overflow

Getting Index of Item in List coming from Array

7 Answers 7

3 Comments

Comments

1 Comment

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

1 Comment

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related