jQuery - 如何在其内部重复一个函数以包含嵌套文件

Question

我不知道该怎么称呼这个问题，因为它涉及到很多事情，但我们将从第一个问题开始......

我一直在尝试编写一个简单易用的 jQuery，用于静态 html 站点上的包含(类似于 php 或 ssi)。每当它找到 div.jqinclude 时，它都会获取 attr('title') (这是我的外部 html 文件)，然后使用 load() 来包括外部 html 文件。然后它将 div 的类更改为 jqincluded

所以我的主index.html可能包含几行，如下所示:

<div class="jqinclude" title="menu.html"></div>

但是，在 menu.html 中可能还嵌套有其他包含内容。因此它需要进行第一级包含，然后对新包含的内容执行相同的操作。到目前为止，它工作得很好，但它非常冗长，而且只深入了几个级别。

如何使以下重复函数不断循环，直到页面上不再有 class="jqinclude" 元素为止？我尝试了 arguments.callee 和其他一些令人费解的古怪尝试，但均无济于事。

我也有兴趣知道是否还有另一种完全不同的方式可以做到这一点。

 $('div.jqinclude').each(function() { // begin repeat here
  var file = $(this).attr('title');
  $(this).load(file, function() {
   $(this).removeClass('jqinclude').addClass('jqincluded');
   $(this).find('div.jqinclude').each(function() { // end repeat here
    var file = $(this).attr('title');
    $(this).load(file, function() {
     $(this).removeClass('jqinclude').addClass('jqincluded');
     $(this).find('div.jqinclude').each(function() {
      var file = $(this).attr('title');
      $(this).load(file, function() {
          $(this).removeClass('jqinclude').addClass('jqincluded');
      });
     });
    });
   });
  });
 });

Answer 1

您可以利用选择器的上下文部分将其包装在递归函数中，如下所示:

function doIncludes(context) 
{
  $('div.jqinclude', context).each(function() { // begin repeat here
    $(this).load($(this).attr('title'), function() {
      $(this).removeClass('jqinclude').addClass('jqincluded');
      doIncludes($(this));
    });
  });
}
$(function() {
  doIncludes(document);
});

这会从整个文档中开始查找包含内容，然后递归，仅在每次刚刚加载的内容中查找。