2

Olá, bom dia.

Eu preciso comparar uma mudança nas filhas da DIV1 para poder fazer uma notificação. Desta forma que fiz pode não ser a melhor, ainda estou aprendendo.

<div class="div1">

           <div class="filha">
           <div class="filha">
           <div class="filha"> assim que adicionado o Js precisa ter como saber </div>
           <div class="filha"> se retirado tbm precisa saber </div>

</div>

var myFunction4 = function() {
	jQuery(".div1").load(" meusite/minhaurl .div1");
};
var myFunction5 = function() {
	filhas = jQuery(".div1 .filha").length;
	//console.log(filhas);
};
setInterval(myFunction4, 10000); 
setInterval(myFunction5, 10000); 
   
A função 4 pega os dados novos da "div1" e joga no local correto. Adicionando uma nova "filha" quando ela existe. (não sei se mexe no DOM)

A função 5 consegue saber exatamente o número de elementos filhos do pai(assim que adicionado ou retirado). Mas como saber anteriormente quantos eram ?

Pra poder comparar e assim poder notificar ? Esta é a forma correta ?

Existe uma melhor ? Abraços

2 Respostas 2

3

Para saber uma mudança de algum componente você pode usar o MutationObserver. É bem simples seu uso:

let target = document.getElementById('div-pai');

let observer = new MutationObserver(mutation => {
    // Função vai ser chamada quando tiver inserção ou remoção de algum componente filho.
});

observer.observe(target, {childList: true});

Nesse exemplo eu coloquei para ele observar somente as mudanças dos nós filhos. Mas é possível fazer algumas outras observações, referência.

2
  • Então, eu tentei com observer. Mas sempre tenho este erro Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. Por isso desisti. Sou iniciante em JS. Não entendo pq não é um node Se dou um console.log no target recebo um Null
    – Uriel
    Commented 16/04/2018 às 21:59
  • Funciona, o problema é que da mesma forma que o que fiz com Jquery Eu não consigo contar as novas mudanças :(
    – Uriel
    Commented 16/04/2018 às 23:13
3

Muito fácil, meu caro amigo. Ainda mais com JQuery!

Segue o passo a passo:

  1. Pegue o html da primeira div
  2. Pegue o html da segunda div
  3. Compare as duas

Simples assim!!

Agora na prática seria:

htmlDiv1 = $("#Div1").html();
htmlDiv2 = $("#Div2").html();

if (htmlDiv1 != htmlDiv2) {
    // escreva aqui o que acontece quando as duas não são mais iguais.
}
5
  • Não entendi bem. O load coloca novas divs .filha Dentro de DIV1 É preciso entender que serão várias filhas (ou não) dentro de DIV1 Pelo que entendi não vai me avisar quando uma nova filha for adicionada via load()
    – Uriel
    Commented 16/04/2018 às 15:45
  • Realmente, o código que está aí não vai avisar quando houver uma alteração. Mostrei apenas como fazer a verificação de maneira simples, mas ainda tem que colocar um setInterval() ou uma outra estrutura para detectar isso... Commented 16/04/2018 às 15:51
  • É exatamente isto que estou procurando. Como detectar
    – Uriel
    Commented 16/04/2018 às 15:54
  • Ué, não entendi então. Você não tem controle sobre o que acontece no html? O que vai adicionar ou tirar as divs não é um script criado por você mesmo? Porque nesse caso é só você colocar nesse script que adiciona ou tira as divs o que você quer fazer, não precisa detectar quando acontece pois você sabe quando acontece. Porém se realmente você não tem controle então você pode tentar usar o MutationObserver. Commented 16/04/2018 às 16:07
  • Fiz via load por achar mais simples. Eu coloco via load() pegando via URL a mesma posição e jogando na mesma DIV.
    – Uriel
    Commented 16/04/2018 às 16:24

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 .