jquery - 递归 JQuery 加载命令

Question

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

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

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

1. 调用Jquery加载函数将内容加载到“content”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 形式返回数据并从中创建元素。