jquery - 递归 JQuery 加载命令

Question

我正在使用 JQuery 将内容加载到 div 元素中，一切正常。

$("#content").load('www.urltogetcontentfor.com')

我现在想扩展它。我拥有的结构是一棵树，其中每个分支可能（或可能没有）附有子分支。我想要发生的是递归调用 JQuery 加载命令，直到没有子附加到它为止。类似于以下步骤：

1. 调用 Jquery 加载函数将内容加载到“内容”div 中。
2. 如果加载函数返回子节点已附加
3. 再次调用 JQuery 加载函数来获取孩子
4. 重复步骤 2 和 3，直到没有孩子可用。

有没有人在 JQuery 中做过这个或者知道处理这个的插件？

谢谢

Answer 1

递归加载内容可以通过以下原则完成：

function loadTree($element) {
  $element.each(function(){
    this.load('url', function(){
      loadTree(this.find('.children'));
    });
  });
}

loadTree($('#content'));

您使用 jQuery 对象调用该函数。它遍历对象中的元素并为每个元素调用 load。在成功回调中，它会在加载的代码中挑选孩子并调用自己。

但是，如果可能，您应该尝试使用一个请求来获取整个树，例如以 JSON 格式返回数据并从中创建元素。