1

Olá,

Eu estou tentando fazer uma função que ao clicar em um elemento eu consiga pegar ou a arvore(todos os parents) do elemento (até o body ou uma tag específica), ou pegue algo parecido com o "Copy -> Copy Selector" do DevTools.

inserir a descrição da imagem aqui

Por exemplo quando eu clicar no b me retornar algo como div > nav > h3 > b.

Clicando no label retornar div > label.

Clicando no h3 retornar div > nav > h3.

Podendo incluir o body se quiser... Caso precise inserir um id em um elemento para saber onde parar é uma solução viável também.

Agradeço desde já!

Edit

Melhorando a dúvida...

Vamos supor que eu tenha uma estrutura HTML dentro de uma div.

Como por exemplo:

<div id="stack-ex">
     <div>
         <nav>
              <label>Teste</label>
         </nav>
         <label>Texto 2</label>
     </div>
</div>

Eu preciso listar o conteúdo do #stack-ex mais ou menos assim:

  • div
    • nav
      • label
    • label

Então a estrutura do <li> é uma referencia ao conteúdo do #stack-ex, eu posteriormente precisaria junto com a lista ter a o selector do elemento que o item da lista faz referencia. Pois depois vou colocar algo como um botão para alterar cor, ou outros casos.

Por isso ao clicar precisaria pegar o parent dele pois depois só usaria $(aqui) sendo aqui = #stack-ex > div > nav > label.

O click era apenas algo para exemplificar para vocês me ajudarem com um exemplo prático, não necessariamente vou clicar e chamar a função.

4
  • Renan, você precisa só do nome das tags ? ou do objeto HTML em sí? Commented 30/08/2018 às 14:17
  • Basicamente a string mesmo. Commented 30/08/2018 às 17:31
  • Realmente eu não consegui entender bem o propósito. Vai até me desculpando, mas não entendi mesmo. Acho que seria interessante a gente conversar num chat para vc me explicar melhor isso e qual o objetivo, até porque estou achando estranho pegar a árvore toda do elemento. Acredito que deva ter uma solução melhor e mais simples. Fico no aguardo.
    – Sam
    Commented 31/08/2018 às 4:23
  • Olá, podemos conversar sim num chat, como podemos fazer isso? Commented 31/08/2018 às 12:34

2 Respostas 2

1

Com jQuery você consegue retornar a árvore assim.

$('.evento').on('click', function () {
  $(this).parentsUntil('div.root');
  // ele não retornará o elemento atual clicado
  // então você pode pegar ele com o $(this) mesmo
});
0
1

Você pode criar um evento click para todos os elementos do body e tratar o clique no elemento clicado, buscando os seus ancestrais. No final irá retornar uma string no formato que pediu (demais explicações no código):

$("body *").click(function(e){
   e.stopPropagation();          // evita o bubbling
   var ateh = "#corpo";          // seletor que define até onde irá procurar o ancestral
                                 // pode ser um id, class, tag ou outro seletor válido
   var prev = $(this)            // pega o elemento clicado
   .parentsUntil(ateh)           // pega os ancestrais até o primeiro filho definido na variável ateh
   .addBack();                   // adiciona o elemento clicado (jQuery v1.8 ou maior)
//   .andSelf();                 // adiciona o elemento clicado (jQuery v1.7 ou menor)
   var tags = prev.get()         // pega os elementos do nodelist
   .map(function(a){             // e converte em uma array com os objetos HTML
      return a.tagName           // retorna os nomes das tags do objetos HTML
   })
   .join(" > ")                  // converte em string separando-os por " > "
   .toLowerCase();               // converte tudo em minúsculas
   var pais = ateh               // monta a string final incluindo o ancestral definido
   + " > "                       // na variável ateh que não foi incluído no .parentsUntil()
   + tags;

   console.clear();              // limpa o console
   console.log(pais);            // imprime no console
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="corpo">
<div>
   div
   <nav>
      nav
      <h3>
         H3
         <b>
            b
         </b>
      </h3>
   </nav>
   <label>
      label
   </label>
</div>
</body>

Uma observação a respeito do bubbling:

Como um elemento está dentro de outro (é um descendente direto ou não), se você clicar nele estará clicando nos seus pais também. Ou seja, o evento será disparado no elemento clicado e em todos os seus ancestrais, mas o que queremos é que o evento escute apenas o elemento clicado. O .stopPropagation() serve justamente para isso, evitar que o evento seja disparado também pelos ancestrais do elemento clicado. Tem um bom tópico aqui que trata do assunto.

9
  • Obrigado pela explicação, me ajudou mesmo! Commented 30/08/2018 às 17:29
  • Vamos falar por aqui rs
    – Sam
    Commented 30/08/2018 às 19:25
  • cara, continuo sem entender direito. É preciso um exemplo da estrutura do HTML e o que vc quer de resultado.
    – Sam
    Commented 30/08/2018 às 19:26
  • Vou explicar do inicio o problema. Eu estou pegando o HTML dentro de uma DIV e estou mostrando como lista Então algo como: <div> <nav> <label> Texto </label> </nav> <label> Texto 2 </label> </div> É listado como: -div > nav * label > label Eu queria que ao clicar em um item de uma lista (que diz respeito ao HTML acima), me retorne a árvore dele. Para eu usar depois no Jquery como selector $(aqui). E assim conseguir referenciar o elemento posteriormente. Commented 30/08/2018 às 19:34
  • Poxa, a estrutura da lista ficou na mesma linha aqui nos comentarios. Mas espero que entenda. Commented 30/08/2018 às 19:35

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 .