Question

我正在建立一个带有div过滤器的网站，并希望根据过滤器集动态地计算div的数量。

此代码可以正常工作，但不会对过滤器的更改产生动态反应...

$('.detail').each(function(i) { 
    var n = $(this).children('.box').length;
    $(".countDiv"+i).text("There are " + n + " divs inside parent box detail.");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content-body" class="clearfix">

<!-- detail div no 1 = 3 items inside -->
    <span class="countDiv0"></span> 
    <div class="detail">
        <div class="box">
            Div item 1
        </div>
        <div class="box">
            Div item 2
        </div>
        <div class="box">
            Div item 3
        </div>
    </div>
    <br /><br />
    <!-- detail div no 1 = 4 items inside -->
    <span class="countDiv1"></span> 
    <div class="detail">
        <div class="box">
            Div item 1
        </div>
        <div class="box">
            Div item 2
        </div>
        <div class="box">
            Div item 3
        </div>
        <div class="box">
            Div item 4
        </div>
    </div>

</div>

有人可以帮忙吗？

Answer 1

好吧，也要正确回答，我们将需要查看执行过滤器操作的代码。无论如何，您需要做的是将代码封装在一个函数中，并在完成过滤后调用该函数。例如：

function countDivs() {
  //your code here for counting the divs
}

function filterAction() {
  //your code here that filters and creates the divs dynamically
  countDivs()
}

Answer 2

$(document).ready(function(){
$("#btnCreate").click(function(){
$('.detail').append("<div class='box'>Div item n</div>");
});
});

$("body").on('DOMSubtreeModified', ".detail", function() {
    $('.detail').each(function(i) { 
    var n = $(this).children('.box').length;
    $(".countDiv"+i).text("There are " + n + " divs inside parent box detail.");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content-body" class="clearfix">

<!-- detail div no 1 = 3 items inside -->
    <span class="countDiv0"></span> 
    <div class="detail">
        <div class="box">
            Div item 1
        </div>
        <div class="box">
            Div item 2
        </div>
        <div class="box">
            Div item 3
        </div>
    </div>
    <br /><br />
    <!-- detail div no 1 = 4 items inside -->
    <span class="countDiv1"></span> 
    <div class="detail">
        <div class="box">
            Div item 1
        </div>
        <div class="box">
            Div item 2
        </div>
        <div class="box">
            Div item 3
        </div>
        <div class="box">
            Div item 4
        </div>
    </div>
</div>
<div>
<button type="button" id="btnCreate">Create a new div inside detail div</button>
</div>

我无法理解过滤器更改的含义。我了解的是对文档DOM所做的任何更改。如果是这样，则需要将像@folo（above）这样的DivCount事件绑定到这样的事件。

$("body").on('DOMSubtreeModified', "mydiv", function() {
    //countDiv();
});

Refer to this link

我已经更新了答案。请检查请按照我使用的编号进行编号。

Answer 3

您可以使用突变观察器来聆听您详细信息下的孩子的变化。有关突变的更多信息，请参见http://jsfiddle.net/sq5cd3rh/4/。

针对您的情况，您可以将其添加到每个示例的代码中

1）添加负责更改dom的观察者

type="number"

2）将其连接到您的计数逻辑中

function createObserver(targetNode, cb) {
  const config = { childList: true };

  // Callback function to execute when mutations are observed
  const callback = function(mutationsList, observer) {
    for (var mutation of mutationsList) {
      if (mutation.type == 'childList') {
        cb();
      }
    }
  };

  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  observer.observe(targetNode, config);
}

您可以在这里{{3}}

看到它的运行情况

结合过滤器动态计算div

3 个答案: