检查div子元素是否更改 [英] Check if div child elements changes

问题描述

我不明白。
此代码不应该有效吗？

此处的HTML代码

 < div id =past> 
< div data-rollid =283585class =ball ball-1> 7< / div> 
< div data-rollid =283586class =ball ball-1> 4< / div> 
< div data-rollid =283587class =ball ball-8> 11< / div> 
< div data-rollid =283588class =ball ball-8> 14< / div> 
< div data-rollid =283589class =ball ball-1> 2< / div> 
< div data-rollid =283590class =ball ball-1> 5< / div> 
< div data-rollid =283591class =ball ball-1> 2< / div> 
< div data-rollid =283592class =ball ball-1> 6< / div> 
 div data-rollid =283593class =ball ball-8> 13< / div> 
< div data-rollid =283594class =ball ball-1> 3< / div> 
< / div> 
  

此处的jQuery代码

  $（'＃past'）。one（'DOMSubtreeModified'，function（）{
 var stuff = $（'＃panel8-14 .mytotal '）.html（）; 
 var test =' - '; 
 if（test.indexOf（stuff）> = 0）{
 console.log（'asdf'）; 
} 
 else {
 console.log（'nope'）; 
} 
  

}）;

问题是：

• 代码并使用.one（）函数，那么它只在第一次加载时调用该函数一次，而不是当div内容更改时...




• 使用.bind或与.on然后我给它回来2次...

解决方案

您可以使用 MutationObserver

  var target = #past）。get（0）; var observer = new MutationObserver（function（mutations）{mutations.forEach（function（mutation）{if（mutation.removedNodes.length）{console.log（removed nodes，mutation。 removeNodes [0] .nodeValue）; alert（removed nodes）;} if（mutation.addedNodes.length）{alert（added nodes）; console.log（added nodes，mutation.addedNodes [0]。 nodeValue）;}}）;}）; var config = {childList：true，subtree：true，characterData：true}; observer.observe（target，config）; $（＃past div：first ）; // do stuff  

 < script src = //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script> ;<div id =past> < div data-rollid =283585class =ball ball-1> 7< / div> < div data-rollid =283586class =ball ball-1> 4< / div> < div data-rollid =283587class =ball ball-8> 11< / div> < div data-rollid =283588class =ball ball-8> 14< / div> < div data-rollid =283589class =ball ball-1> 2< / div> < div data-rollid =283590class =ball ball-1> 5< / div> < div data-rollid =283591class =ball ball-1> 2< / div> < div data-rollid =283592class =ball ball-1> 6< / div> < div data-rollid =283593class =ball ball-8> 13< / div> < div data-rollid =283594class =ball ball-1> 3< / div>< / div>  

div>

I don't get it. Shouldn't this code work?

Here the HTML-Code

<div id="past">
    <div data-rollid="283585" class="ball ball-1">7</div>
    <div data-rollid="283586" class="ball ball-1">4</div>
    <div data-rollid="283587" class="ball ball-8">11</div>
    <div data-rollid="283588" class="ball ball-8">14</div>
    <div data-rollid="283589" class="ball ball-1">2</div>
    <div data-rollid="283590" class="ball ball-1">5</div>
    <div data-rollid="283591" class="ball ball-1">2</div>
    <div data-rollid="283592" class="ball ball-1">6</div>
    div data-rollid="283593" class="ball ball-8">13</div>
    <div data-rollid="283594" class="ball ball-1">3</div>
</div>

And here the jQuery-Code

$('#past').one('DOMSubtreeModified', function() {
    var stuff = $('#panel8-14 .mytotal').html();
    var test = '-';
    if( test.indexOf(stuff) >= 0){
        console.log('asdf');
    }
    else{
        console.log('nope');
}

});

The Problem is:

• When i do it with this code and use the .one() function then it calls the function only once at the first loading and not when the div content changes...

• When i do it with .bind or with .on then i gives it back 2 times...

解决方案

You can use MutationObserver

var target = $("#past").get(0);

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {

    if (mutation.removedNodes.length) {
      console.log("removed nodes", mutation.removedNodes[0].nodeValue);
      alert("removed nodes");
    }

    if (mutation.addedNodes.length) {
      alert("added nodes");
      console.log("added nodes", mutation.addedNodes[0].nodeValue);
    }

  });
});

var config = {
  childList: true,
  subtree: true,
  characterData: true
};

observer.observe(target, config);

$("#past div:first").text(1); // do stuff

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="past">
  <div data-rollid="283585" class="ball ball-1">7</div>
  <div data-rollid="283586" class="ball ball-1">4</div>
  <div data-rollid="283587" class="ball ball-8">11</div>
  <div data-rollid="283588" class="ball ball-8">14</div>
  <div data-rollid="283589" class="ball ball-1">2</div>
  <div data-rollid="283590" class="ball ball-1">5</div>
  <div data-rollid="283591" class="ball ball-1">2</div>
  <div data-rollid="283592" class="ball ball-1">6</div>
  <div data-rollid="283593" class="ball ball-8">13</div>
  <div data-rollid="283594" class="ball ball-1">3</div>
</div>

这篇关于检查div子元素是否更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！