jQuery question

Question

I am using jquery so that when the user clicks a link I get the id of said link then use it to select a li item with the same id and animate it. Well, at least that's what I'm trying to do...so far I have:

$(function(){
        $('#slider-buttons a').click(function(){
     var x = $(this).attr('id');
     var y = $('#slider-stage-list li' + x);

     if(x == "inicio")
      $(this).animate({ "left" : "0px"},700);
     else
      $(this).animate({ "left" : (increment*3) + "px"},700);
    });
});

I've tried various combinations but I still can't get 'y' to have the value of the list item with the same id as x (the clicked url)...x does gets the correct id but y still returns "undefined" at best...here's the html code that goes along...

<div id="slider-buttons">
    <a href="#" id="inicio">Inicio</a> <br />
    <a href="#" id="previous">&iquest;Qui&eacute;nes Somos?</a> <br /> 
    <a href="#" id="clases">Clases</a> <br />
    <a href="#" id="equipo">Equipo</a> <br />
    <a href="#" id="album">&Aacute;lbum</a> <br />
    <a href="#" id="especiales">Eventos Especiales</a> <br />
    <a href="#" id="#">Cont&aacute;ctanos</a> <br />
</div>
<div id="stage">
    <ul id="slider-stage-list">
        <li id="inicio">Inicio</li>
        <li id="nos">&iquest;Qui&eacute;nes Somos?</li>
        <li id="clases">Clases</li>
        <li id="equipo">Equipo</li>
        <li id="album">&Aacute;lbum</li>
        <li id="especiales">Eventos Especiales</li>
        <li id="#">Cont&aacute;ctanos</li>
    </ul>
</div>

any help will be appreciated =)

---

Edit to answer the 3 responses

If I do any of those I get in console.log(); "[object Object]" =/

---

Edit answering BC

Thanks for the HTML correction, still if I write down the code you gave me for jquery I still get in console.log(); "[object Object]"

---

Edit 'cause I didn't got the last response

If I try that approach I either get "[object Object]" or nothing...

Answer 1

You're missing a pound sign to use the ID selector, I believe. Try this:

    var x = $(this).attr('id');
    var y = $('#slider-stage-list li#' + x); // Note the 'li#' instead of just 'li'.

Answer 2

No, no

This is invalid html because your links are sharing the same id's as your list items.

Your code should look more like this:

<div id="slider-buttons">
    <a href="#" id="inicio">Inicio</a> <br />
    <a href="#" id="previous">&iquest;Qui&eacute;nes Somos?</a> <br /> 
    <a href="#" id="clases">Clases</a> <br />
    <a href="#" id="equipo">Equipo</a> <br />
    <a href="#" id="album">&Aacute;lbum</a> <br />
    <a href="#" id="especiales">Eventos Especiales</a> <br />
    <a href="#" id="contactanos">Cont&aacute;ctanos</a> <br />
</div>
<div id="stage">
    <ul id="slider-stage-list">
        <li id="item_inicio">Inicio</li>
        <li id="item_previous">&iquest;Qui&eacute;nes Somos?</li>
        <li id="item_clases">Clases</li>
        <li id="item_equipo">Equipo</li>
        <li id="item_album">&Aacute;lbum</li>
        <li id="item_especiales">Eventos Especiales</li>
        <li id="item_contactanos">Cont&aacute;ctanos</li>
    </ul>
</div>

and

$(function(){
        $('#slider-buttons a').click(function(){
        var x = $(this).attr('id');
        var y = $('li#item_' + x);

        if(x == "inicio")
                $(this).animate({ "left" : "0px"},700);
        else
                $(this).animate({ "left" : (increment*3) + "px"},700);
    });
});

Answer 3

var y = $('#slider-stage-list li' + x);

Should be

var y = $('#slider-stage-list li#' + x);
// or
var y = $('#' + x);
// or
var y = $(this);

The third option mentioned is probably best.

However, you have a problem: your id's are not unique. This may be what you're looking for (without modifications to your HTML):

var y = $('#slider-stage-list li').filter(function() {
    return $(this).attr('id') == x;
});