Question

我不确定该怎么称呼这个问题，因为它涉及各种各样的事情，但我们将从第一个问题开始......

我一直在尝试在静态html网站上编写一个简单易用的jQuery for includes（类似于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);
});

这包括从文档整体开始，然后递归，只查看刚刚加载的内容。

Answer 2

试试这个：

$("div.jqinclude").each(load_include);

function load_include() {
  $(this).removeClass("jqinclude").load($(this).attr("title"), function() {
    $(this).find("div.jqinclude").each(load_include);
  });
}

它的工作方式是找到要加载的每个div并加载它们。当该加载完成时，将检查该div的内容以包含更多div，因为您不需要检查整个文档，只需检查新内容。

这应该加载所有内容。

jQuery - 如何在自身内重复一个函数来包含嵌套文件

2 个答案: