9

Eu possuo várias estruturas que seguem um estilo único:

<div data-id="1">
 <div>
   <button>Descobrir é o data-id desta estrutura</button> 
 </div>
</div>

com jQuery ou JavaScript como eu poderia obter o data-id (1) da div através do click no button?

1
  • 1
    $('button').parent().parent().data('id'); Commented 5/08/2015 às 19:26

2 Respostas 2

16

Sugiro usares o .closest() assim:

$('button').on('click', function () {
    var target = $(this).closest('[data-id]');
    alert(target.data('id'));
});

jsFiddle: http://jsfiddle.net/5t59xu5f/

O .closest() sobe no DOM à procura do primeiro elemento que o seletor indica/procura. O seletor '[data-id]' quer dizer "um elemento com o atributo data-id, independentemente do seu valor, desde que tenha o atributo".

Desse modo evitas código do tipo .parent().parent() que é dificil de manter e saber a que elemento se aplica.

4
  • 1
    Boa, sem contar que em uma futura manutenção de HTML e possível inserção de um novo nível de DIV, não precisará dar manutenção no JS também adicionando um novo .parent(). Commented 5/08/2015 às 19:35
  • 1
    Dei meu positivo e marcação correta por esse fato de não precisar de uma manutenção em conjunto caso seja necessário, achei mais limpo de trabalhar, fora que não conhecia essa função, +1 pro meu aprendizado, obrigada!!!
    – Elaine
    Commented 5/08/2015 às 23:05
  • como esse .closest() se comporta dentro do onclick="fun(event)"? function fun(e) { e.preventDefault(); console.log(e.closest('[data-id]')); Diz que o closest é uma função.
    – ayelsew
    Commented 4/04/2018 às 1:08
  • @ThomsonTorvalds se estás a usar o e deves fazer e.target.closest(...etc em JS nativo ou $(e.target).closest( com jQuery
    – Sergio
    Commented 4/04/2018 às 9:10
4

Você pode fazer dessa maneira usando parent() e depois data():

$('button').on('click', function(){
    alert($(this).parent().parent().data('id'));
});
4
  • E se tiver várias div's dentro uma da outra, eu tenho que usar o parent() o tanto de vezes que eu tenho uma div? Commented 5/08/2015 às 19:27
  • 1
    Sim, parent() é referente ao nível, para cada div deve ter um parent().
    – Paulo
    Commented 5/08/2015 às 19:31
  • 2
    Sugiro a leitura: jquerybrasil.org/uso-dos-metodos-parent-parents-ou-closest Commented 5/08/2015 às 19:31
  • @LuisHenrique boa referência, realmente o uso de closest facilita bastante.
    – Paulo
    Commented 5/08/2015 às 19:36

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 .