Função só é executada no primeiro elemento da lista

[Mulambo 1]

Olá a todos,

Tenho uma lista em que cada elemento tem a seguinte estrutura:

 

 

<div class='exibeItem' id='x'>
<p class='tooltip' id='full'>Valor Full:XX,XX</p>
<p class='hide tooltip' id='semi-full' >Valor Semi-Full:XX,XX</p>
<a href='#full' class='itensNivel' id='full'>Itens Full</a>
<a href='#semi-full' class='itensNivel' id='semi-full'>Itens Semi-Full</a>
</div>

 

O que eu quero fazer é ao clicar em Itens Full ou Itens Semi-full eu mude a classe dos elementos <p> trocando a classe 'hide' de posição.

Mas eu preciso que isso funcione apenas na div com id='x' e as outras mantenham o valor original

 

O código escrito abaixo faz isso, porém faz apenas na primeira div, não funcionando para as seguintes.

 

    $('.exibeItem > a').click(function(e){
        e.preventDefault();
        thisId = $(this).parents().attr('id');
        nivel = $(this).attr('href');
       
        
        if(nivel == "#full"){
            $("#"+thisId+" p#full").removeClass('hide');
            $("#"+thisId+" p#semi-full").addClass('hide');
            
        }
        if(nivel == "#semi-full"){
            $("#"+thisId+" p#semi-full").removeClass('hide');
            $("#"+thisId+" p#full").addClass('hide');
        }
        return false;
    });

 

Alguma idéia para que funcione em várias divs?

[hinom 5]

id -> identificação

 

O atributo id deve ser único para cada objeto

 

Após consertar isso vc conseguirá fazer o que pretende.

[Mulambo 1]

@hinom

 

Obrigado,

Mas eu cada div exibeItem tem seu id próprio, que é em numero. id1,id2,id3,etc..

[hinom 5]

então, o que é isso ?

 

 

<div class='exibeItem' id='x'>
<p class='tooltip' id='full'>Valor Full:XX,XX</p>
<p class='hide tooltip' id='semi-full' >Valor Semi-Full:XX,XX</p>
<a href='#full' class='itensNivel' id='full'>Itens Full</a>
<a href='#semi-full' class='itensNivel' id='semi-full'>Itens Semi-Full</a>
</div>

[Mulambo 1]

@Hinom, po cara valeu mesmo, eu estava tão cansado que deixei passar algo bobo!

 

<div class='exibeItem' id='x'>
<p class='tooltip' id='fullx'>Valor Full:XX,XX</p>
<p class='hide tooltip' id='semi-fullx' >Valor Semi-Full:XX,XX</p>
<a href='#full' class='itensNivel' id='full'>Itens Full</a>
<a href='#semi-full' class='itensNivel' id='semi-full'>Itens Semi-Full</a>

 

 

    $('.exibeItem > a').click(function(e){
        e.preventDefault();
        thisId = $(this).parents().attr('id');
        nivel = $(this).attr('href');
       
        
        if(nivel == "#full"){
            $("#"+thisId+" p#full"+thisId).removeClass('hide');
            $("#"+thisId+" p#semi-full"+thisId).addClass('hide');
            
        }
        if(nivel == "#semi-full"){
            $("#"+thisId+" p#semi-full"+thisId).removeClass('hide');
            $("#"+thisId+" p#full"+thisId).addClass('hide');
        }
        return false;
    });