Hierarquia de um Elemento
Olá galerinha, quem puder ajudar eu agradeço :)
Tenho o seguinte código HTML
<div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div>
Vamos supor que cada div possui um número identificador exclusivo, se olharmos para o "escopo local" (De acordo com a div que as contém) esse código corresponde a seguinte hierarquia:
Div#0 = Div número 0
--------------------------------------------------------------
Div#0
|
|___________
| | |
Div#0 Div#1 Div#2.
|
|___________
| | |
Div#0 Div#1 Div#2.
Com base nesse pensamento eu fiz o seguinte código:
<div>Clique em mim
<div>Clique em mim</div>
<div>Clique em mim
<div>Clique em mim</div>
<div>Clique em mim</div>
<div>Clique em mim</div>
</div>
<div>Clique em mim</div>
</div>
<script type = "text/javascript">
function escopoLocal (elemento) {
var conta = 1;
var container_pai = elemento.parentNode;
var elementos_pai = elemento.parentNode.getElementsByTagName (elemento.nodeName);
var resultado = false;
for (var i = 0; i < elementos_pai.length; i ++) {
if (container_pai === elementos_pai[i].parentNode) {
if (elementos_pai[i] === elemento) {
resultado = conta;
}
conta ++;
}
}
return resultado;
}
document.onclick = function (e) {
var evento = window.event ? window.event : e;
var targetoria = evento.srcElement ? evento.srcElement : evento.target;
if (targetoria.nodeName.toUpperCase () === "DIV") {
alert ("Olá :)\n\nSe me comparar no elemento em que estou contido, eu vou estar na " + escopoLocal (targetoria) + "ª posição.");
}
}
</script>
<style type = "text/css">
div {
border: 1px solid black;
backgroundColor = "white";
padding: 20px;
margin: 20px;
}
</style>
Explicação:
Mostra a posição de um elemento. Quando você clica na página ele pega o "evento", a partir do evento ele pega o elemento, a partir do elemento ele acha quem é o elemento pai, a partir do elemento pai ele acha todos seus elementos filhos. Com uma lista de todos os filhos o script faz várias comparações com um loop para chegar na posição desejada.
Aqui está minha dúvida
if (container_pai === elementos_pai[i].parentNode) {
if (elementos_pai[i] === elemento) {
Como o javascript consegue comparar dois objetos se não existe parâmetros ? É uma única tag "div" sem "id", "classe" ou "name" http://forum.imasters.com.br/public/style_emoticons/default/ninja.gif
Lembra que eu falei no começo de indentificadores exlcusivos ? Então, eu acho que é isso, mas se for isso, onde está esse número e como posso extrai-lo? http://forum.imasters.com.br/public/style_emoticons/default/ninja.gif
Vlw galeraaaaaaaaaaaaaa, flowwwwwwwwwwwwwwwwwwwww
Discussão (2)
Carregando comentários...