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

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);
    });