can't get the second value of span

Question

I have this small problem

<ul>
    <li><span id="test">val1</span></li>
    <li><span id="test">val2</span></li>
    <li><span id="test">val3</span></li>
</ul>

But when I try to get the value of the clicked span I get the value of the first one only (when I click the second or third span I can't get the value of it ) I don't know why this is happening.

Here's the jquery code :

$(document).ready(function(){

   $("#test").click(function(){
         val = $(this).text();
         alert(val);
    });

});

Shh.. id should be unique.. :\ – Rajaprabhu Aravindasamy Jul 03 '14 at 10:49 — Rajaprabhu Aravindasamy, Jul 03 '14 at 10:49
@RajaprabhuAravindasamy okay......(_whispered_) ;) – Jai Jul 03 '14 at 10:52 — Jai, Jul 03 '14 at 10:52

Anoop Joshi P · Answer 1 · 2014-07-03T10:57:57.570

3

Id should be unique, use class instead of it.

<ul>
<li><span class="test">val1</span></li>
<li><span class="test">val2</span></li>
<li><span class="test">val3</span></li>
</ul>

js

$(document).ready(function(){

   $(".test").click(function(){
         val = $(this).text();
         alert(val);
    });

});

Demo

edited Jul 03 '14 at 10:57

answered Jul 03 '14 at 10:49

Anoop Joshi P

25,373
8
32
53

@HamIsm does this solution solved your issue? – Anoop Joshi P Jul 03 '14 at 12:31

score 1 · Answer 2 · answered Jul 03 '14 at 10:54

use class instaed of id . as id should be unique.

<ul>
<li><span class="test">val1</span></li>
<li><span class="test">val2</span></li>
<li><span class="test">val3</span></li>
</ul>

jquery

$(document).ready(function(){

   $(".test").click(function(){
         val = $(this).text();
         alert(val);
    });

});

Demo

can't get the second value of span

2 Answers2