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

Question

Я не уверен, что назвать этот вопрос, поскольку он включает в себя множество вещей, но мы начнем с первого выпуска ...

Я пытался написать простой в использовании jQuery для включения (аналогично php или ssi) на статические html-сайты. Всякий раз, когда он находит div.jqinclude, он получает attr('title') (это мой внешний файл html), затем использует load() для включения внешнего файла html. Затем он изменяет класс дел до 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, потому что вам не нужно проверять весь документ, а только новый контент.

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