递归 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 格式返回数据并从中创建元素。