Question

我有一个div。让我们称之为#divResults

#divResults中将包含N .divProducts。当用户单击按钮时，将执行asp.net方法。此方法会向.divProducts添加更多#divResults。我需要知道.divProducts的数量何时从例如40增加到80。

我需要使用JQuery以某种方式通知我何时发生这种变化。

我怎么能这样做？

Answer 1

只做

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

这应该可以获得.divProducts div中类#divResults的元素数量。现在由你决定何时触发它

修改

如果你的主要问题是关于何时触发它，那么你可以把它放在按钮的点击事件处理程序中。

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

Answer 2

您无法在change上使用div活动。因此，有一件事使隐藏元素具有相同的div数据。当div的内容改变时，也会更新其值：

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

现在把这个隐藏的事件监听器放在：

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

Answer 3

jQuery中没有什么可以做到这一点。但您可以使用MutationObserver来观察元素childList的更改。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 4

请参考以下代码，希望这可以帮助您..您可以根据自己的需要更改if条件

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用JQuery检查div中元素的数量何时发生变化

4 个答案: