Verwenden Sie JQuery, um zu überprüfen, wenn sich die Anzahl der Elemente in div ändert

Question

Ich habe ein div. Rufen wir es #divResults

Die #divResults wird N .divProducts innerhalb haben. Wenn der Benutzer auf eine Schaltfläche klickt, wird eine asp.net-Methode ausgeführt. Diese Methode fügt .divProducts zu #divResults hinzu. Ich muss wissen, wenn die Menge von .divProducts steigt von zum Beispiel 40 bis 80.

Ich brauche JQuery, um mich irgendwie zu benachrichtigen, wenn diese Änderung geschieht.

Wie kann ich das tun?

Answer 1

Just do

var divCount = $("#divResults .divProducts").length; 

Das sollten Sie die Anzahl der Elemente mit Klasse .divProducts im #divResults div bekommen. Es ist nun an Sie zu bestimmen, wann es

EDIT

auszulösen, wenn Ihre Hauptfrage dabei ist, wenn es um auslösen, dann kann man es nur setzen in dem Click-Ereignishandler der Schaltfläche.

var divCount = 0; 
$("#buttonAddMore").on('click', function(){ 
    divCount = $("#divResults .divProducts").length; 
}); 

Answer 2

Sie können nicht change Ereignis auf div verwenden. Also mache eine Sache ein verstecktes Element, das die gleichen Daten von div enthält. Und aktualisieren auch seinen Wert, wenn der Gehalt an div Änderungen wie:

$('#hiddenElem').val(myValue).trigger('change'); 
// This will trigger the change event 

Jetzt ein Ereignis-Listener auf diese versteckt setzen wie:

$('#hiddenElem').change(function(){ 
    // Do what ever you want to do here 
}); 

Answer 3

entnehmen Sie bitte Code unten, hoffen, dass diese you..you helfen könnte die, wenn die Bedingung ändern, wie Sie

$(document).ready(function() { 
 
\t \t \t var numItems = $('.divProducts').length; 
 
     if(numItems > 40){ 
 
     alert("hey its greater than 40"); 
 
     }else{alert("its not yet 40");} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divResults"> 
 
<div class="divProducts"> 
 
</div> 
 
<div class="divProducts"> 
 
</div> 
 
</div>

nach Ihrem Bedarf von

Benachrichtigung wie

Answer 4

Nichts speziell in jQuery, das dies tun kann. Sie können jedoch MutationObserver verwenden, um nach Änderungen an Elementen zu suchen. childList.

var $target = $('#divResults'); 
 

 
$('#add').click(function(){ 
 
    $target.append("<div class=\"divProducts\">Product</div>"); 
 
}); 
 
    
 
// create an observer instance 
 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    console.log($target.children().length); 
 
    });  
 
}); 
 
    
 
// configuration of the observer: 
 
var config = { childList: true, }; 
 
    
 
// pass in the target node, as well as the observer options 
 
observer.observe($target[0], config);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divResults"> 
 
</div> 
 
<button id="add">Add a new div</button>