Использовать селекторы Jquery в HTML, загруженном $ .AJAX? - PullRequest
45 голосов
/ 01 января 2009

у меня

$.ajax({
  url: identity,
  success: function(data) { ProcessIdentityServer(data) }
});

Когда возвращается 'data', есть ли способ запустить селекторы для него, не добавляя его в DOM. Так, например, как я могу получить все значения href любых тегов LINK, содержащихся в HTML, которые содержатся в «data», без предварительного добавления его в DOM? Кажется, стыдно добавлять его в DOM, если все, что я хочу сделать, это извлечь некоторые вещи в массив. У кого-нибудь есть идеи?

Ответы [ 9 ]

105 голосов
/ 02 января 2009

Я добавлю одну заметку, которая относится к аналогичной проблеме: если ваш AJAX возвращает следующее:

<div class="test">Hello</div>
<div class="one">World</div>

Следующий jQuery Не будет работать:

$(data).find('div.test');

, так как div - это элементы верхнего уровня, а данные - это не элемент, а строка, для его работы необходимо использовать .filter

$(data).filter('div.test');
38 голосов
/ 01 января 2009
// Finds all div elements within an XML document from an AJAX response.
$("div", xml.responseXML);
31 голосов
/ 20 октября 2011

Прежде чем начать, давайте кратко рассмотрим, что делает jQuery с базовой HTML-страницей, возвращаемой из вызова $.ajax(), и конвертируем возвращаемые данные в объект jQuery.

$.ajax({
    dataType : 'html',
    url      : 'path/to/example-page.html',
    success  : function(data) {

        // log the result of the data converted into a jquery object.
        console.log( $(data) );

    }
});

Вот что вы ожидаете увидеть:

[

    0         <TextNode textContent="\n\n\n\n\n ">
    1         title
    2         <TextNode textContent="\n ">
    3         meta
    4         <TextNode textContent="\n\n\n\n\n">
    5         div#container
    6         Comment { data=" #container ", length=12, nodeName="#comment", more...}
    7         <TextNode textContent="\n\n">
    jquery    "1.6.4"
    length    8
    selector  ""

    // additional data and functions removed for brevity

]

YIKES! Это ужасно! Попытка сделать что-либо с этим может дать результаты, но вам нужно знать, как выглядит структура данных каждый раз и где данные лежат в этом объекте. Это данные в корне или они скрыты внутри?

Как упоминалось в предыдущих постерах, вы можете использовать .filter(), но корень - это то, на что способен поиск, потому что вы просто фильтруете возвращаемые результаты. Тем не менее, если в этот момент вы будете использовать .find(), а нужный вам элемент находится в корне, вы получите пустой набор, но все, что похоронено за пределами корня, будет найдено.

Итак, зачем связываться с необходимостью знать, как выглядит эта структура данных со 100% -ной уверенностью, и зачем беспокоиться о том, чтобы справляться со всеми трудностями, связанными с использованием нескольких вызовов .filter() и .find(), и смею сказать .each() петля? Тьфу! Это просто слишком много работы и отнимает слишком много времени.

Если вы хотите .find() определенный HTML-элемент, возвращенный из вызова .ajax(), начните со следующей строки:

var response = $('<html />').html(data);

Неужели все так просто? На самом деле, да, это так! Здесь происходит то, что новый элемент <html> создается и преобразуется в объект jQuery. Это используется в качестве начального местоположения для вставки возвращенного HTML из .ajax() вызова. Это похоже на $('html') на веб-странице. С этого вы можете начать поиск элементов.

response.find( ... ); // any jquery selector in place of the ellipsis.

Вот пример, который использует оригинальный вопрос автора:

$.ajax({
    dataType : 'html',
    url      : 'path/to/example-page.html',
    success  : function(data) {

        // set the returned contents in a new base <html> tag.
        var response = $('<html />').html(data),
            anchors, hrefValuesList = [ ],
            i, end;

        // now you can search the returned html data using .find().
        anchors = response.find('a');

        // grab all your href values from each anchor element.
        end = anchors.length;
        for (i = 0; i < end; i++) {
            hrefValuesList.push( anchors[ i ].href );
        }

        // continue processing the data as necessary...

    }
});

Очевидно, что вышесказанное потребует некоторой доработки, если вы хотите отфильтровать любой нежелательный контент или хотите уточнить возвращаемые значения.

При этом вы можете увидеть что-то вроде следующего примера возвращаемого массива:

[ "http://stackoverflow.com/", "http://www.google.com/" ] // and so on...

Используя этот подход, вы можете легко использовать мощность .find() для любых данных HTML, возвращаемых с помощью функции $.ajax(), как вы уже делаете для любых элементов, которые вы найдете в DOM. Настоящим бонусом является то, что вы напрямую не манипулируете DOM, чтобы найти или сделать то, что вы хотите, что является дорогим процессом.

Удачной чистки! =)

20 голосов
/ 01 января 2009

Предполагая, что data является строкой HTML, вы можете сделать это:

$(data).find('a');

Это вернет ссылки без добавления данных в DOM.

3 голосов
/ 06 июня 2011

Сначала нужно определить контейнер, чтобы можно было получить / изменить элементы из ответа:

 $.ajax({            
     url: url + "/ajax.htm",
     dataType: "html",
     success: function(html) {
         container = $('#ajax_content');
         container.html(html);
         container.find("a").css("background","red");
     }
 });
2 голосов
/ 10 января 2010

Вы также можете использовать контекст сейчас (не знаю, когда это было введено):

$.get('some/url', '',
    function (data) {
        $("#domelement", data);
    }
);
2 голосов
/ 01 января 2009

Конечно, вы можете использовать функцию $ (data), одну из основных функций jquery, чтобы превратить возвращаемый html в элементы DOM. Проверьте документы онлайн .

1 голос
/ 11 сентября 2015

Это то же самое, что принятый ответ, но с некоторыми дополнительными пояснениями.

Вы можете использовать параметр jQuery context Ссылка на документы

Я не могу объяснить лучше, чем документация.

Контекст селектора

По умолчанию селекторы выполняют поиск в старте DOM в корне документа. Тем не менее, альтернативный контекст может быть дан для поиск с использованием необязательного второго параметра функции $ ()

Параметр context существует с jQuery v1.0

Таким образом, решение примера OP «получить все значения href любых тегов LINK, содержащихся в HTML, хранящемся в« data », без предварительного добавления его в DOM» »будет выглядеть так:

success: function(data){
    $("a", data).each(function(){
        console.log( $(this).attr("href") );
    });
}
0 голосов
/ 26 июля 2011

мое окончательное решение было

jQuery.ajax({
    url: "/some-url",
    cache: false,
    dataType: "html",
    success: function(data) {
        jQuery("#target").html( jQuery(data).find('#ajax-data'));
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...