добавлять элементы до - использования while с динамическими добавленными элементами

#javascript #jquery #while-loop

#javascript #jquery #цикл while

Вопрос:

У меня есть функция, которая добавляет в div-контейнер div

  $.ajax(
    {
        type: "GET",
        url: "/LoadedData",
        data: { "pageNumber": pageNumber },
        success: function (result) {
            $('.Container').append(result);
        }
    }

и я хочу выполнять эту функцию до тех пор, пока этот контейнер div не будет содержать div с значением xxx

Я пытаюсь сделать это с помощью цикла while, но выглядит так, когда я делаю :

 while($('.Container div').is('#xxx'))
{}

функция не видит новые div, добавленные к контейнеру :/

Ответ №1:

Поместите свой код в функцию, которая рекурсивно вызывается в, callback: если result не соответствует вашему селектору.

Он будет продолжать выполняться до тех пор, пока селектор не будет подобран.

 var container = $('.Container');  // cached the .Container element

function add_to_container() {

   $.ajax(
    {
        type: "GET",
        url: "/LoadedData",
        data: { "pageNumber": pageNumber },
        success: function (result) {
            container.append(result);
            if( !$(result).is("#xxx") ) {  // if the result was not the one...
                add_to_container();       // ...recursively call the function
            }
        }
    }
}

1. @netmajor: Какого типа производительность? Если вы имеете в виду общее время, необходимое для получения надлежащего #xxx результата, то да, запросы отправляются последовательно, и поэтому это займет больше всего времени. Вы могли бы отправить кучу запросов, но нет гарантии, что они вернутся в том же порядке. Или вы могли бы заставить свой сервер отправлять пакеты результатов, выполнять поиск по результатам, добавлять их, если #xxx они не найдены, или добавлять те, что выше, #xxx если они найдены. Я бы сказал, что while цикл определенно не является правильным подходом.

Ответ №2:

В Jquery есть функция each для перебора элементов dom.

 $('.Container div').each(function(){});