How to get unique value in jQuery?

Question

I am learning jQuery.

I have the following chunk of code in an HTML file:

<table width="100%">
<tr>
    <td align='center'>
        <div>
            <a id='get_this' href='#'>
            <input type='hidden' id='id' value='1'><img src='images/1.gif'></a>
        </div>
    </td>
    <td align='center'>
        <div>
            <a id='get_this' href='#'>
            <input type='hidden' id='id' value='2'><img src='images/2.gif'></a>
        </div>
    </td>
    <td align='center'>
        <div>
            <a id='get_this' href='#'>
            <input type='hidden' id='id' value='3'><img src='images/3.gif'></a>
        </div>
    </td>
</tr>

What I want to do is, when I click any of the image, I can get the <input hidden> value, so that I can display the information. For example, I click the id=1, then I will display information on id1 in somewhere else. I tried this:

$("a#get_this").click(function(){
        var id = $('input[type=hidden]#id').val();
        window.alert("You have chosen the id: " + id);
});

It always return id: 1 to me.

Answer 1

You use the same ID multiple times when an ID should be unique. You should be using classes instead:

<a class='get_this' href='#'> 

and then

$("a.get_this").click(function(){

Answer 2

IDs have to be unique in a HTML document. I think the behaviour is undefined if you have more than one element with the same ID, but most browser probably pick the first one then.

Use classes instead:

<table width="100%"> 
<tr> 
    <td align='center'> 
        <div> 
            <a class='get_this' href='#'> 
            <input type='hidden' value='1'><img src='images/1.gif'></a> 
        </div> 
    </td> 
    <td align='center'> 
        <div> 
            <a class='get_this' href='#'> 
            <input type='hidden' value='2'><img src='images/2.gif'></a> 
        </div> 
    </td> 
    <td align='center'> 
        <div> 
            <a class='get_this' href='#'> 
            <input type='hidden' value='3'><img src='images/3.gif'></a> 
        </div> 
    </td> 
</tr>

and JS:

$("a.get_this").click(function(){
        // find all input elements inside "a" (which is only one)
        var id = $(this).find('input').val(); 
        window.alert("You have chosen the id: " + id);
    });

Answer 3

Ids have to be unique, so you can't have multiple elements with the same id. But if you want this you could attach the click handler to the image, add the id of the 'data' you want to your image too (let's say <img id="data1" ... />). Now you have it.

Remark: ids can't start with a number. They have to start with a letter.

Answer 4

id should be unique in a document. Change the id get_this to a class instead:

<a class="get_this" href="#">..</a>

You can then get the value of the input field as:

$("a.get_this").click(function() {
    var id = $(this).children("input:hidden").val();
    window.alert("You have chosen the value: " + id);
});

The hidden input tag can simply be:

<input type='hidden' value='1'>

---

Note that some browsers may return more than 1 results back when you do:

$("a#get_this").length

but that behavior is not guaranteed, and you should never rely on it. It's better to use classes or something else for this purpose.