Использовать Jquery Selectors на загруженном HTML файле?.AJAX?

У меня

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

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

Ответы

Ответ 1

// Finds all div elements within an XML document from an AJAX response.
$("div", xml.responseXML);

Ответ 2

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

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

Следующая работа jQuery Не будет:

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

поскольку divs являются элементами верхнего уровня, а данные не являются элементом, а строкой, чтобы заставить его работать, вам нужно использовать .filter

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

Ответ 3

Прежде чем начать, давайте быстро взглянем на то, что делает 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, чтобы находить или делать то, что хотите, что является дорогостоящим процессом.

Счастливая чистка! =)

Ответ 4

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

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

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

Ответ 5

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

 $.ajax({            
     url: url + "/ajax.htm",
     dataType: "html",
     success: function(html) {
         container = $('#ajax_content');
         container.html(html);
         container.find("a").css("background","red");
     }
 });

Ответ 6

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

Ответ 7

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

$.get('some/url', '',
    function (data) {
        $("#domelement", data);
    }
);

Ответ 8

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

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

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

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

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

Параметр контекста существует с тех пор, как jQuery v1.0

Поэтому решение примера OP для "получения всех значений hREF любых тегов LINK, содержащихся в HTML, содержащихся в" данных "без добавления его в DOM first", будет:

success: function(data){
    $("a", data).each(function(){
        console.log( $(this).attr("href") );
    });
}

Ответ 9

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

jQuery.ajax({
    url: "/some-url",
    cache: false,
    dataType: "html",
    success: function(data) {
        jQuery("#target").html( jQuery(data).find('#ajax-data'));
    }
});