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