Использовать селекторы JQuery в загруженном HTML-коде $ .AJAX?
у меня есть
$.ajax({
url: identity,
success: function(data) { ProcessIdentityServer(data) }
});
Когда возвращаются «данные», есть ли способ запустить для них селекторы, не добавляя их в DOM. Так, например, как я могу получить все значения href любых тегов LINK, содержащихся в HTML, содержащемся в «данных», не добавляя их сначала в DOM? Кажется обидным добавлять его в DOM, если все, что я хочу сделать, это извлечь что-то в массив. У кого-нибудь есть идеи?
Ответы 9
Предполагая, что data - это строка HTML, вы можете сделать это:
$(data).find('a');
Это вернет ссылки без добавления данных в DOM.
Конечно, вы можете использовать функцию $ (data), одну из основных функций jquery, чтобы превратить возвращенный html в элементы DOM. Проверьте документы онлайн.
// Finds all div elements within an XML document from an AJAX response.
$("div", xml.responseXML);
Я проголосовал за это, хотя, если подумать, я думаю, что явный вызов find более читабелен, особенно для тех, кто менее знаком с фреймворком.
Для всех, кто сталкивается с этим потоком, просто используйте метод jQuery load (), чтобы получить часть возвращенного ответа AJAX. jQuery ('# контейнер'). load ('ajax / test.html # selector', function () {...}). Или для получения нескольких порций см. Здесь ссылка на сайт
Пожалуйста, прочтите следующий ответ @stuartloxton, так как он содержит ответ.
Пожалуйста, дайте подробное объяснение.
Одно примечание, которое я добавлю, связано с аналогичной проблемой здесь: если ваш AJAX возвращает следующее:
<div class = "test">Hello</div>
<div class = "one">World</div>
Следующая работа jQuery Не будет:
$(data).find('div.test');
поскольку div являются элементами верхнего уровня, а данные - это не элемент, а строка, чтобы он работал, вам нужно использовать .filter
$(data).filter('div.test');
серьезно, этот ответ был слишком полезным ... потратил на это полдня.!
Спасибо, потратил на это два года!
Это ответ. Жаль, что изначально он не был признан правильным!
ПРОСТО :: ОТВЕТ
Вы также можете использовать контекст сейчас (не знаю, когда это было введено):
$.get('some/url', '',
function (data) {
$("#domelement", data);
}
);
не уверен, почему это не набрало больше голосов. контекст существует с jQuery v 1.0
Вы должны сначала определить контейнер, чтобы иметь возможность получать / изменять элементы из ответа:
$.ajax({
url: url + "/ajax.htm",
dataType: "html",
success: function(html) {
container = $('#ajax_content');
container.html(html);
container.find("a").css("background","red");
}
});
мое окончательное решение было
jQuery.ajax({
url: "/some-url",
cache: false,
dataType: "html",
success: function(data) {
jQuery("#target").html( jQuery(data).find('#ajax-data'));
}
});
Прежде чем начать, давайте кратко рассмотрим, что делает 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.info( $(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
]
УРА! Это довольно некрасиво! Попытки сделать что-либо с этим может дают результаты, но вам нужно знать, как структура данных выглядит каждый раз, и где данные лежат в этом объекте. Это данные в корне или они похоронены внутри?
Как упоминалось в предыдущих плакатах, вы можете использовать .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 напрямую, чтобы найти или сделать то, что вы хотите, а это дорогостоящий процесс.
Удачной чистки! знак равно
«Без добавления его в DOM» - я бы ожидал, что $('<html />').html(data) будет обрабатывать примерно такую же обработку, как и $("#someExistingDiv").html(data), не так ли? Тем не менее, очень подробный ответ ...
@mplungjan - Можно так подумать. Проведя простой модульный тест в Firefox 7.0, вы увидите, что $('#someExistingDiv').html(data) работает в среднем примерно в 4 раза медленнее, чем $('<html />').html(data). Это связано с тем, что первый манипулирует DOM, что вызывает перекомпоновку браузера. Теперь, если вы хотите сказать, что $('#someExistingDiv') быстрее, чем $('<html />'), вы будете правы. Если вы сделаете это несколько раз, то использование нового элементного подхода в конечном итоге должно быть быстрее, потому что каждый раз, когда к DOM обращаются, это увеличивает время выполнения в целом. Кроме того, новый элемент можно использовать повторно.
Удивительно ... Спасибо за кристально чистый ответ, это именно то, что мне было нужно. Без преобразования строки в объект jQuery решение метода поиска вызывало у меня ошибки в Internet Explorer; это решение идеальное.
Это то же самое, что и принятый ответ, но с некоторыми дополнительными пояснениями.
Вы можете использовать параметр jQuery контекстСсылка на документы
Я не могу объяснить лучше, чем документация.
Selector Context
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function
Параметр контекста существует с jQuery v1.0
Поэтому решение для примера OP, чтобы «получить все значения href любых тегов LINK, содержащихся в HTML, содержащемся в 'data', не добавляя его сначала в DOM»:
success: function(data){
$("a", data).each(function(){
console.info( $(this).attr("href") );
});
}
похоже, это не работает, но .filter вместо .find работает. как @stuartloxton отвечает