JQuery - как повторить функцию внутри себя, чтобы включить вложенные файлы

Question

Я не уверен, как назвать этот вопрос, так как он затрагивает множество вопросов, но мы начнем с первого вопроса ...

Я пытался написать простой в использовании jQuery для включений (аналогично php или ssi) на статических html-сайтах. Всякий раз, когда он находит 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, чтобы включить, потому что вам не нужно проверять весь документ, только новое содержимое.

Это должно загрузить все.