加载外部HTML后自动获取容器子元素数量的实现问题

直接利用load()方法的回调函数即可实现加载完成后自动获取元素数量，回调会在内容加载完成后执行，能避开异步问题拿到正确结果。

示例代码 #

// 加载articles.html到#container，加载完成后执行回调逻辑
$('#container').load('articles.html', function() {
  // 从当前容器（#container）中查找.article元素并统计数量
  const articleCount = $('.article', this).length;
  // 将数量赋值给需要复用的变量（比如全局变量）
  window.articleTotal = articleCount;
  console.log(articleCount); // 输出正确的3
});

关键注意点 #

• load()的第二个参数是加载完成后的回调函数，所有依赖加载内容的操作必须放在这个回调内部
• 使用$('.article', this)限定查找范围在#container内，比全局查找更高效
• 若要复用数量值，可将articleCount赋值给全局变量，或者封装到可调用的逻辑中供后续使用

内容的提问来源于stack exchange，提问作者Stalkium