Extrae una parte del documento HTML en jQuery

Quiero hacer una llamada AJAX a una página que devuelve HTML, extraer parte del HTML (utilizando los selectores de jQuery) y luego usar esa parte en mi JavaScript basado en jQuery.

La recuperación de AJAX es bastante simple. Esto me da todo el documento HTML en el parámetro “datos” de la función de callback.

Lo que no entiendo es cómo manejar esos datos de una manera útil. Me gustaría envolverlo en un nuevo objeto jQuery y luego utilizar un selector (a través de find () creo) para obtener solo la parte que quiero. Una vez que tenga eso, lo pasaré a otro objeto JavaScript para insertarlo en mi documento. (Esta delegación es la razón por la que no estoy usando jQuery.load () en primer lugar).

Los ejemplos de get () que veo todos parecen ser variaciones sobre esto:

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

… que, si lo entiendo correctamente, inserta todo el documento devuelto en el elemento seleccionado. No solo es sospechoso (¿esto no inserta el etc.?), Pero es demasiado grosero para lo que quiero.

Sugerencias sobre formas alternativas de hacer esto son bienvenidas.

Puede usar su syntax de selector estándar y pasar los data como el contexto para el selector. El segundo parámetro, data en este caso, es nuestro contexto.

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

Esto es equivalente a hacer:

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

Dependiendo de cómo planee usar esto, $.load() puede ser una mejor ruta, ya que permite que tanto una URL como un selector filtren los datos resultantes, que se pasan directamente al elemento al que se llamó el método. en:

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

Esto cargaría los contenidos de

...

en getstuff.php en nuestro elemento de página local

...

.

Podrías crear un div y luego poner el HTML en eso, así …

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

… y luego filtra los datos como este …

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

… y luego usa eso.

Esto puede parecer peligroso ya que está creando un elemento y colocando HTML arbitrario en él, pero no lo es: cualquier cosa peligrosa (como una etiqueta de script ) solo se ejecutará cuando se inserte en el documento . Aquí, insertamos los datos en un elemento, pero ese elemento nunca se coloca en el documento; solo si insertamos content en el documento se insertaría algo, e incluso entonces, solo se insertaría algo en el content .

Puedes usar load en un nuevo elemento y pasarlo a una función:

 function handle(element){ $(element).appendTo('body'); } $(function(){ var div = $('
'); div.load('/help a', function(){handle(div);}); });

Ejemplo: http://jsbin.com/ubeyu/2

Es posible que desee ver el parámetro dataFilter() del método $.ajax . Le permite realizar operaciones en los resultados antes de que se desmayen.

jQuery.ajax

Puedes hacer esto de esta manera

 $.get( url, { data : data }, function (response) { var page_content = $('.page-content',response).get(0); console.log(page_content); } ) 

Aquí en console.log verá el HTML interno de la porción esperada / deseada de la respuesta. Entonces puedes usarlo como lo desees