jquery, how to get different values from links with the same class?

i have this jsfiddle script

what happens is that the 2 alerts have the same number. and it should me one with 123 and the other one with 555

the thing is that i have to have the same classes

see here:

<ul class="tabs">
<li><a href="#tab1">Home</a> | </li>
<li> | <a href="#tab2">Top 10</a> | </li>
<li><a id="mine" href="#tab3"></a></li>
</ul>

<div id="tab1" class="tab_content">
<ul>
 <li>
<div class="cont_picture">开发者_如何学JAVA;<a id="mine_click" href="#" >a test</a> | </div>
<div id="number">123</div>
</li><li>
<div class="cont_picture"> | <a id="mine_click" href="#" >a test1</a></div>
<div id="number">555</div>
</li>
</ul>
</div>
<div id="tab2" class="tab_content">234</div>
<div id="tab3" class="tab_content">2222</div>

and:

    var strtalentnum;
$('#mine_click').live('click', function() {
        strtalentnum = $('#number').text();
        $('#mine').trigger('click');
});

$("#mine").click(function(){
    if(strtalentnum){
         alert (strtalentnum);
    }
});



//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
    $('ul.tabs li#none').removeClass('visible');
    $('ul.tabs li#none').addClass('none');
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

any ideas on how to fix this? i've tried to use $(this) but it looks like the alerts dont appear no more

thanks

You cannot have multiple items in an HTML document with the same ID value. You simply can't do that and trying to use those ids will generate inconsistent results. In most cases where you are using ids, you want to switch to using classes:

Using your HTML (where I've changed conflicting ids to classes), you can make a click on either of the links alert the neighboring number value with this jQuery:

$('.mine_click').live('click', function() {
    alert($(this).closest("li").find(".number").text());
});

You can see it work in this jsFiddle: http://jsfiddle.net/jfriend00/cj4RE/

Here's the relevant part of the HTML that I've fixed (to use classes instead of ids):

<div id="tab1" class="tab_content">
    <ul>
        <li>
            <div class="cont_picture">
                <a class="mine_click" href="#" >a test</a> | 
            </div>
            <div class="number">123</div>
        </li>
        <li>
            <div class="cont_picture"> | 
                <a class="mine_click" href="#" >a test1</a>
            </div>
            <div class="number">555</div>
        </li>
    </ul>
</div>

The jQuery code above gets the parent li tag from the link that was clicked on, then finds the object within that common parent that has the class of "number" and grabs the text. That will be the neighboring number.

Dissecting the code:

$(this) gets a jQuery object for the link that was clicked on.

.closest("li") finds the first parent that is an li tag

.find(".number") searches that parent for one or more objects with the class="number"

.text() extracts the text from that object

You use IDs while you should use classes.

$(function() {

    var strtalentnum;

    $('.mine_click').click(function(e) {
        e.preventDefault();
        strtalentnum = +$(this).parent('div').next('.number').html();
    });

    $('.mine').click(function(e) {
        e.preventDefault();
        if (strtalentnum) {
            alert(strtalentnum);
        } else {
            alert('No Value Selected');
        }
    });

});

But on a side note, you probably want to change id="number" and id="mine_click" to class="number"... etc. Only one element per ID, ya' know?