JavaScript中无法访问数组元素，如何遍历Drupal.Ajax数组？

这个坑我在Drupal开发时踩过好多次！你遇到的本质是异步加载导致的时机问题——当你用for/forEach/filter遍历的时候，Drupal还没完成Ajax对象的初始化填充，所以数组length显示为0；但Chrome控制台打印的是对象引用，当你展开它时浏览器会读取当前最新的对象状态，这时候Drupal已经把6个元素加载进去了，所以能看到正确内容。

下面给你几个靠谱的解决方案：

1. 利用Drupal Behaviors系统（最推荐） #

Drupal的behaviors会在DOM就绪、以及每次Ajax请求完成后自动触发，能确保你访问Drupal.Ajax时数组已经被完整填充：

Drupal.behaviors.traverseAjaxElements = {
  attach: function(context, settings) {
    // 遍历Drupal.Ajax的所有值（因为它是键值对对象，不是纯数组）
    Object.values(Drupal.Ajax).forEach(function(ajaxInstance) {
      // 这里处理每个Ajax元素，比如打印它的配置
      console.log('当前Ajax实例:', ajaxInstance);
      // 举个例子：获取该Ajax对应的选择器
      console.log('绑定选择器:', ajaxInstance.selector);
    });
  }
};

2. 监听Ajax完成事件（实时捕获） #

如果需要实时响应新添加的Ajax元素，可以监听全局的ajaxComplete事件，每次Ajax请求结束后再遍历：

$(document).on('ajaxComplete', function(event, xhr, settings) {
  // 遍历Drupal.Ajax的键名，再获取对应实例
  Object.keys(Drupal.Ajax).forEach(function(ajaxKey) {
    var ajaxInstance = Drupal.Ajax[ajaxKey];
    // 可以根据条件过滤需要的实例，比如匹配特定URL
    if (ajaxInstance.url.includes('/my-custom-endpoint')) {
      // 执行你的业务逻辑
      console.log('匹配到目标Ajax实例:', ajaxInstance);
    }
  });
});

为什么控制台能看到元素？ #

最后补充个小知识点：Chrome控制台打印对象时，默认显示的是引用的快照占位符，当你点击展开时，浏览器才会去读取对象的当前实际状态。所以你代码执行时数组是空的，但等你在控制台展开时，Drupal已经完成了Ajax对象的初始化，就会显示6个元素啦。

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