У меня
$.ajax({
url: identity,
success: function(data) { ProcessIdentityServer(data) }
});
Когда возвращается "data", существует ли способ запуска селекторов против него, не добавляя его в DOM. Так, например, как я могу получить все значения hREF любых тегов LINK, содержащихся в HTML, хранящихся в "данных", не добавляя их сначала в DOM? Кажется стыдом, что нужно добавить его в DOM, если все, что я хочу сделать, это извлечь некоторые вещи в массив. У кого-нибудь есть идеи?
// Finds all div elements within an XML document from an AJAX response.
$("div", xml.responseXML);
Одна заметка, которую я добавлю, которая связана с аналогичной проблемой, заключается в том, что если ваш AJAX возвращает следующее:
<div class="test">Hello</div>
<div class="one">World</div>
Следующая работа jQuery Не будет:
$(data).find('div.test');
поскольку divs являются элементами верхнего уровня, а данные не являются элементом, а строкой, чтобы заставить его работать, вам нужно использовать .filter
$(data).filter('div.test');
Прежде чем начать, давайте быстро взглянем на то, что делает 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, чтобы находить или делать то, что хотите, что является дорогостоящим процессом.
Счастливая чистка! =)
Предполагая, что data - это строка HTML, вы можете сделать это:
$(data).find('a');
Это вернет ссылки без добавления данных в DOM.
Сначала вы должны определить контейнер, чтобы получить/изменить элементы из ответа:
$.ajax({
url: url + "/ajax.htm",
dataType: "html",
success: function(html) {
container = $('#ajax_content');
container.html(html);
container.find("a").css("background","red");
}
});
Конечно, вы можете использовать функцию $(data), одну из основных функций jquery, чтобы вернуть возвращенный html в элементы DOM. Проверьте документы в Интернете.
Вы также можете использовать контекст сейчас (не знаете, когда это было введено):
$.get('some/url', '',
function (data) {
$("#domelement", data);
}
);
Это то же самое, что и принятый ответ, но с дополнительным объяснением.
Вы можете использовать параметр jQuery контекста Ссылка на документы
Я не могу объяснить это лучше, чем документация.
Контекст селектора
По умолчанию селекторы выполняют свои поиски в начале DOM в корне документа. Однако альтернативный контекст может быть задан для поиск с использованием необязательного второго параметра для функции $()
Параметр контекста существует с тех пор, как jQuery v1.0
Поэтому решение примера OP для "получения всех значений hREF любых тегов LINK, содержащихся в HTML, содержащихся в" данных "без добавления его в DOM first", будет:
success: function(data){
$("a", data).each(function(){
console.log( $(this).attr("href") );
});
}
мое окончательное решение было
jQuery.ajax({
url: "/some-url",
cache: false,
dataType: "html",
success: function(data) {
jQuery("#target").html( jQuery(data).find('#ajax-data'));
}
});