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?