Извлечение части документа HTML в jQuery

Я хочу сделать вызов AJAX на страницу возврата HTML, извлечь часть HTML (с помощью селекторов jQuery), а затем использовать эту часть в JavaScript на основе jQuery.

AJAX-поиск довольно прост. Это дает мне весь HTML-документ в параметре "data" функции обратного вызова.

Я не понимаю, как правильно обрабатывать эти данные. Я хотел бы обернуть его в новый объект jQuery, а затем использовать селектор (через find(), я верю), чтобы получить только ту часть, которую я хочу. Как только я это сделаю, я передам его другому объекту JavaScript для вставки в мой документ. (Эта делегация объясняет, почему я не использую jQuery.load() в первую очередь).

Примеры get(), которые я вижу, кажутся вариациями на этом:

$('.result').html(data);

... который, если я его правильно понимаю, вставляет весь возвращенный документ в выбранный элемент. Это не только подозрительно (не вставляет ли это <head> и т.д.?), Но слишком грубо для того, что я хочу.

Предложения относительно альтернативных способов сделать это приветствуются.

Ответ 1

Вы можете использовать стандартный синтаксис селектора и передать data в качестве контекста для селектора. Второй параметр data в этом случае - наш контекст.

$.post("getstuff.php", function(data){
  var mainDiv = $("#mainDiv", data); // finds <div id='mainDiv'>...</div>
}, "html");

Это эквивалентно выполнению:

$(data).find("#mainDiv");

В зависимости от того, как вы планируете использовать это, $.load() может быть лучшим маршрутом, поскольку он позволяет как URL-адреса, так и селектора фильтровать полученные данные, которые передаются непосредственно в элемент, метод вызываемый:

$("#mylocaldiv").load("getstuff.php #mainDiv");

Это будет загружать содержимое <div id='mainDiv'>...</div> в getstuff.php в наш элемент локальной страницы <div id='mylocaldiv'>...</div>.

Ответ 2

Вы можете создать div, а затем поместить в него HTML, например this & hellip;

var div = $("<div>").html(data);

... и затем отфильтруйте данные, подобные этому & hellip;

var content = $("#content", div.get(0));

& hellip, а затем используйте это.

Это может выглядеть опасно, поскольку вы создаете элемент и помещаете в него произвольный HTML-код, но это не так: что-то опасное (например, тег script) будет выполняться только при вставке в документ. Здесь мы вставляем данные в элемент, но этот элемент никогда не помещается в документ; только если мы вставим content в документ, все будет вставлено, и даже тогда будет добавлено только что-нибудь в content.

Ответ 3

Вы можете использовать load для нового элемента и передать это функции:

function handle(element){
  $(element).appendTo('body');
}

$(function(){
  var div = $('<div/>');
  div.load('/help a', function(){handle(div);});
});

Пример: http://jsbin.com/ubeyu/2

Ответ 4

Вы можете посмотреть параметр dataFilter() метода $.ajax. Он позволяет выполнять операции над результатами до их передачи.

jQuery.ajax