Incrementar variáveis alternadamente. [RESOLVIDO]

luisrcs
(usa Linux Mint)

Enviado em 29/12/2016 - 18:13h

Tenho quinze div's: div-a, div-b, div-c, ..., as quais recebem clones de si mesmas (filhos) de forma dinâmica, clicando num botão. O problema é que tenho que dar um nome para cada filho, que recebe o primeiro nome do pai, a palavra filho no meio e outra string para diferenciar das demais div's do mesmo pai. Eu estava utilizando uma variável para contar e colocar o número no final, mas precisa ter a numeração em sequência para cada família. Cada div tem um botão, que pode ser clicado de forma aleatória e criar a nova div filho. Não posso criar quinze variáveis globais para controlar cada grupo de div's. Segue o código:

var numero = 0; //variável para contar as div's criadas.

function addCampo(id){ //função que recebe o id da div pai.

	var objPai = document.getElementById(id);

	var objFilho = document.createElement("div"); //cria uma nova div

	objFilho.setAttribute("id",id+"filho"+numero); ////definindo atributos ao objFilho (criando uma id com o nome da div pai+'filho'+numero (variável de contagem)

	objPai.appendChild(objFilho); //inserindo o novo elemento na div pai

 

Da forma que está, se eu clicar primeiro na div-b, o id da div filho será: div-bfilho1; se depois clicar na div-g, o id da div filho será: div-gfilho2; se voltar a clicar na div-b, o segundo filho será: div-bfilho3; ou seja, sem sequência, o que não é interessante. O que preciso é que cada família tenha um sequência, para facilitar as consultas, mas sem ter que criar quinze variáveis globais de controle, pelo amor de Deus.

Já estou com a cabeça explodindo de tanto pensar numa solução mas até agora, nada.

Grato por qualquer dica.

luisrcs
(usa Linux Mint)

Enviado em 30/12/2016 - 12:00h

Mesmo sem ninguém tentar me ajudar eu consegui resolver da seguinte maneira:

function addCampo(id){ //função que recebe o id da div pai.

        var i = 0; //variável contadora

	if(document.getElementById(id+'filho'+i)){ //se existir o primeiro filho, passa para o laço que vai identificar o último filho, senão, pula para criaá-lo

		while(document.getElementById(id+'filho'+i)){ //se o primeiro filho existir faz o laço para procurar u último e incrementa o número par dar a sequência

			i++;

		}

	}

	var objPai = document.getElementById(id);

	var objFilho = document.createElement("div"); //cria uma nova div

	objFilho.setAttribute("id",id+"filho"+i); ////definindo atributos ao objFilho (criando uma id com o nome da div pai+'filho'+numero (variável de contagem)

	objPai.appendChild(objFilho); //inserindo o novo elemento na div pai

 

Dessa forma todas as vezes que clicar num botão a variável zera e busca o último que foi incrementado de cada div, mantendo a sequência para cada família de div's.