侦听Javascript中元素的子项计数[重复]

Posted 2023-05-09

【中文标题】侦听Javascript中元素的子项计数[重复]

【英文标题】：Listen for children count of an element in Javascript [duplicate]

【发布时间】：2021-05-02 08:56:51

【问题描述】：

我正在使用 jquery，我想在计算元素的子元素数量后执行一个函数。 我的元素有一个孩子，我想在它变成 2 个或更多之后执行一个函数。 这个子附加由其他一些 javascript 文件处理，我只想听在那个元素中添加一个子。 该附加子项发生在异步操作之后，因此在检查子项计数时可能不会执行。 这是我尝试过的：

let i = 0;
const interVal = setInterval(() => 
    const parent = $(".parent");

    if (parent && parent.length > 1) 
        console.log("Child has been appended.");
     else 
        console.log("Child has not been appended!");

        if (i >= 50000) 
            console.error("A lot of conditions executed and cannot bother browser anymore.");

            clearInterval(interVal);
        
    

    i++;
, 1);

这段代码有问题。 它在一段时间后检查。 我可以用它代替什么？

【问题讨论】：

请向我们展示您的代码以及您尝试过的内容

嗨，欢迎来到 SO。请花时间阅读tour 和How to Ask 页面。

【参考方案1】：

其实都是if-else。

让我给你解释一下。

<div id="parent">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

要达到孩子的数量，您应该像这样使用 .length；

var count = $("#parent li").length;

或者这样

var count = $("#parent ul").children().length;

现在假设如果孩子的数量大于 2 或任何你想要的，你想要执行；

if(count>2)
    alert("I am bigger than 2, mate");

【讨论】：

子附加发生在异步操作之后。所以也许那个时候没有附加。

【参考方案2】：

MutationObserver 是您所需要的。

这是 MDN 示例，稍作修改。

// simulating some content appended in a later time (async)
setTimeout(function () 
  $(".parent").append("<div>I am a div appended after page load!</div>");
, 5000);

// Mutation observer
var targetNode = $(".parent")[0];

// Options for the observer (which mutations to observe)
const config =  attributes: true, childList: true, subtree: true ;

// Callback function to execute when mutations are observed
const callback = function (mutationsList, observer) 
  // Use traditional 'for loops' for IE 11
  for (const mutation of mutationsList) 
    if (mutation.type === "childList") 
      console.log("A child node has been added or removed.");

      // How many children now?
      console.log(`There is $$(".parent").children().length child elements`);
      
      // List them
      $(".parent").children().each(function(index)
        console.log(`#$index+1- $$(this)[0].tagName - $$(this)[0].innerText`)
      )
      
     else if (mutation.type === "attributes") 
      console.log("The " + mutation.attributeName + " attribute was modified.");
    
  
;

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <h1>Hello! Another child will be appended...</h1>
</div>

结束observer...就像在某个时候达到某个条件...使用：

observer.disconnect();