1

Boa tarde !
Preciso de uma ajuda para conseguir obter o valor da div anterior (vermelha DIV01)
Qual o comando posso usar para obter o resultado??
A Div anterior é o elemento pai certo?
Desculpem a ignorância.

function onClick(){}
#DIV1{
	width:300px;
	height:300px;
	background-color:red;
}

#DIV2{
	width:200px;
	height:200px;
	background-color:blue;
}
<div id="DIV1"> 
	<div id="DIV2">
		<button onclick="onClick()"> teste </button>
	</div>
</div>

2
  • 1
    Que valor você precisa?
    – Woss
    Commented 5/10/2017 às 17:58
  • Da ID da DIV01, que consiga pegar a ID da div anterior
    – Sora
    Commented 5/10/2017 às 17:59

2 Respostas 2

2

Tens várias maneiras,
podes ir por:

  • .parentElement.parentElement (funciona mas vai quebrar se mudares a estrutura do DOM)

  • usando tecnologia recente .closest() (não suportada no IE) junto polyll da MDN em baixo.

Exemplo:

function onClick(btn) {
  var maneiraA = btn.closest('#DIV1');
  var maneiraB = btn.parentElement.parentElement;

  console.log(maneiraA.id);
  console.log(maneiraB.id);
}
#DIV1 {
  width: 300px;
  height: 300px;
  background-color: red;
}

#DIV2 {
  width: 200px;
  height: 200px;
  background-color: blue;
}
<div id="DIV1">
  <div id="DIV2">
    <button onclick="onClick(this)"> teste </button>
  </div>
</div>


Se usares o .closest() que acho a melhor opção, podes juntar isto para tornar compatível com browsers antigos:

if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest = 
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i,
            el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {};
        } while ((i < 0) && (el = el.parentElement)); 
        return el;
    };
}
3
  • O .parentElement ele vai retrocedendo de div em div e o closest vai diretamente na que eu preciso? É mais ou menos isso??
    – Sora
    Commented 5/10/2017 às 18:01
  • Novamente muito obrigado @Sergio !! foi de grande ajuda
    – Sora
    Commented 5/10/2017 às 18:01
  • 1
    @Sora exato. Eu prefiro o .closest() mas usa o que te servir melhor. Repara que passei o this no HTML para a função receber o elemento clicado.
    – Sergio
    Commented 5/10/2017 às 18:04
1

Basta pegar o atributo id do parentNode da DIV2:

//função executada no clique
function onClick(){
  //pega a div2
  var div2 = document.getElementById('DIV2');
  //pega o pai da div2
  var div1 = div2.parentNode;
  //escreve o id do pai da div 2
  console.log(div1.id);
}
<div id="DIV1"> 
	<div id="DIV2">
		<button onclick="onClick()"> teste </button>
	</div>
</div>

1
  • Ah, entendi !!! valeu pela explicação Artur
    – Sora
    Commented 5/10/2017 às 18:02

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 .