2

estou com uma dúvida em jQuery:

Tenho o seguinte código dentro de uma página, onde a DIV "description-img" se repete mais de uma vez:

<div class="description-img">
   <div class="confirmacao" style="display: block; ">
      <p class="votoMsg">VOCÊ VOTOU!</p>
      <span class="name"><a hreh="#" id="linkShare">Share Design</a>
         <div id="share" style="display:none;">Links para compartilhamento</div>
      </span>
   </div>
</div>

<div class="description-img">
   <div class="confirmacao" style="display: block; ">
      <p class="votoMsg">VOCÊ VOTOU!</p>
      <span class="name"><a hreh="#" id="linkShare">Share Design</a>
         <div id="share" style="display:none;">Links para compartilhamento</div>
      </span>
   </div>
</div>

Quando utilizo o show()/hide() do jQuery para exibir/ocultar a div "#share" ao clicar botão "#linkShare", ele pega todas as divs da página. Como faço para ele pegar exatamente a DIV que está dentro de cada bloco correspondente?

Muito obrigado pela luz!

1
  • 1
    Não se duplica IDs exatamente por isso, coloque IDs diferentes em cada elemento.
    – ptkato
    23/08/2014 às 14:49

2 Respostas 2

3

O parâmetro ID é utilizado para identificar um elemento específico e não pode ser repetido, para identificar elementos que devem aparecer múltiplas vezes, use uma classe. E para identificar o elemento que esta disparando o evento, use o $(this), abaixo um rápido exemplo:

HTML:

<div class="description-img">
   <div class="confirmacao" style="display: block; ">
      <p class="votoMsg">VOCÊ VOTOU!</p>
      <span class="name"><a hreh="#" class="linkShare">Share Design</a>
         <div class="share" style="display:none;">Links para compartilhamento</div>
      </span>
   </div>
</div>

Jquery:

$('.linkShare').click(function() {
    //$(this) é o .linkShare clicado
    //.siblings('.share') é .share irmão do .linkShare clicado (estão dentro do mesmo span)
    $(this).siblings('.share').show();
});

Veja funcionando no JSFiddle

3
  • Estava criando basicamente a mesma coisa que você fez haha 23/08/2014 às 15:06
  • @RafaelBarbosa Acontece... hehehe 23/08/2014 às 15:08
  • Entendi @Jader, não conhecia o "siblings", sempre tive a referencia de "parent", etc. Muito obrigado!
    – Felipe
    23/08/2014 às 15:45
1

Sendo um pouco mais específico que o colega acima e reforçando o que o patrick falou, quando for repetir elementos não use id, mas sim classes!!! Utilize o find para encontrar um elemento especifico, nesse caso use o this para indicar o elemento clicado ai vc se movimenta no DOM como preferir pode usar .find ou . siblings, creio que nesse caso o .siblings fique mais elegante =] porém abaixo fiz com o parent para ilustrar o uso do .find

<script>
    $(function(){
        $('.linkShare').click(function(){
            $(this).parent().find('.share').toggle("slow");
        });

    });

</script>

<div class="description-img">
   <div class="confirmacao" style="display: block; ">
  <p class="votoMsg">VOCÊ VOTOU!</p>
  <span class="name"><a href="#" class="linkShare">Share Design</a>
     <div class="share" style="display:none;">Links para compartilhamento</div>
    </span>
   </div>
</div>   

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .