2

Com jQuery é bem simples encontrar um elemento ancestral que possui determinada classe, id, atributo etc. usando o método .closest(). Por exemplo, no código abaixo consigo selecionar a div#principal ao clicar em qualquer um de seus descendentes:

$("#principal *").on("click", function(evt){

   var elemento_clicado = $(evt.target)[0];
   var ancestral = $(evt.target).closest("#principal")[0];
   console.log(elemento_clicado, ancestral);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="principal">
  <div>Texto</div>
  <h3>titulo</h3>
  <strong>negrito</strong>
  <div>
    <p>sub-elemento</p>
    <div>
      <ul>
        <li>Lista 1</li>
      </ul>
    </div>
  </div>
</div>

Não importa o nível dentro de #principal em que se encontra o elemento, o .closest(seletor) irá buscar o elemento informado no seletor (no caso a div#principal).

Não conheço um método em JavaScript que faz essa função. Pensei em usar .parentNode mas como os elementos aninhados dentro da div principal podem ter 1, 2, 3 ou vários níveis na árvore, eu não saberia quantos .parentNode usar ao clicar em um elemento no nível 1 ou no nível 5, por exemplo.

Cheguei a este código que me retorna o elemento clicado:

var itens = document.querySelectorAll("#principal .item");
for(var x=0; x < itens.length; x++){
   
   itens[x].onclick = function(evt){
      console.log(evt.target);
   }
   
}
.item{
   background: orange;
   margin-bottom: 1px;
}

.item *{
   background: red;
}
<div id="principal">
   <div class="item">
      <p>
         <strong>Texto 1</strong>
      </p>
   </div>
   <div class="item">
      <h3>Título</h3>
      <p>
         <strong>Texto 2</strong>
      </p>
   </div>
   <div class="item">
      <h3>Título</h3>
      <p>
         <strong>Texto 3</strong>
      </p>
      <div class="item2">
         <div>
            <p>
               Texto 4 <strong>mais...</strong>
            </p>
         </div>
      </div>
   </div>
</div>

No exemplo hipotético acima, como eu faria para chegar à div com a classe .item ao clicar em qualquer um dos seus descendentes, tal como faria o .closest(".item") do jQuery?

0

1 Resposta 1

2

Neste momento JS puro também tem um closest igual ao do JQuery. Este recebe também um seletor e é um método de Element, que no caso vai ser um elemento que tenha obtido do DOM. Veja na documentação.

No seu código bastaria então:

evt.target.closest(".item")

Exemplo:

var itens = document.querySelectorAll("#principal .item");
for(var x=0; x < itens.length; x++){
   
   itens[x].onclick = function(evt){
      var elemento_clicado = evt.target;
      var ancestral = evt.target.closest(".item");
      console.log(elemento_clicado, ancestral);
   }
   
}
.item{
   background: orange;
   margin-bottom: 1px;
}

.item *{
   background: red;
}
<div id="principal">
   <div class="item">
      <p>
         <strong>Texto 1</strong>
      </p>
   </div>
   <div class="item">
      <h3>Título</h3>
      <p>
         <strong>Texto 2</strong>
      </p>
   </div>
   <div class="item">
      <h3>Título</h3>
      <p>
         <strong>Texto 3</strong>
      </p>
      <div class="item2">
         <div>
            <p>
               Texto 4 <strong>mais...</strong>
            </p>
         </div>
      </div>
   </div>
</div>

Como já seria de esperar não existe suporte para o mítico IE, no entanto, existe um polyfill na própria página da documentação caso precise.

3
  • Legal! Não conhecia esse método. Obg!
    – Sam
    30/11/2018 às 1:16
  • 1
    @Sam É, o JS puro tem corrido atrás do JQuery, a criar cada vez mais replicas do que o JQuery sempre teve, hehe
    – Isac
    30/11/2018 às 1:18
  • Pois é. Muito bom isso. No início eu relutei em usar jQuery pq eu achava complicado (eu era mt iniciante na época) e morria pra fazer as coisas em JS. Depois que passei a usa-lo viciei-me pela praticidade, mas agora quero me divorciar dele.
    – Sam
    30/11/2018 às 1:26

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 .