Use Jquery Selectors en $ .AJAX cargado HTML?

yo tengo

$.ajax({ url: identity, success: function(data) { ProcessIdentityServer(data) } }); 

Cuando se devuelve ‘datos’, ¿hay alguna manera de ejecutar selectores contra él sin agregarlo al DOM? Entonces, por ejemplo, ¿cómo puedo obtener todos los valores href de cualquier etiqueta LINK contenida en el HTML contenido en ‘datos’ sin agregarlo primero al DOM? Parece una pena tener que agregarlo al DOM si todo lo que quiero hacer es extraer algunas cosas en una matriz. ¿Alguien tiene alguna idea?

 // Finds all div elements within an XML document from an AJAX response. $("div", xml.responseXML); 

Una nota que agregaré que es de un problema similar aquí es que si su AJAX devuelve lo siguiente:

 
Hello
World

La siguiente jQuery no funcionará:

 $(data).find('div.test'); 

como los divs son elementos de nivel superior y los datos no son un elemento sino una cadena, para que funcione, debes usar .filter

 $(data).filter('div.test'); 

Antes de comenzar, echemos un vistazo rápido a lo que jQuery hace a una página HTML básica devuelta desde una llamada $.ajax() y convirtiendo los datos devueltos en un objeto 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) ); } }); 

Esto es lo que esperaría ver:

 [ 0  1 title 2  3 meta 4  5 div#container 6 Comment { data=" #container ", length=12, nodeName="#comment", more...} 7  jquery "1.6.4" length 8 selector "" // additional data and functions removed for brevity ] 

¡YIKES! ¡Eso es bastante feo! Intentar hacer algo con eso puede producir resultados, pero necesita saber cómo se ve la estructura de datos cada vez, y dónde se encuentran los datos dentro de ese objeto. ¿Están esos datos en la raíz, o están enterrados dentro?

Al igual que los carteles anteriores que mencionamos, puedes usar .filter() , pero la raíz es lo más lejos que irá esa búsqueda, porque simplemente estás filtrando los resultados devueltos. Sin embargo, si usara .find() en este punto y el elemento que desea está en la raíz, recibirá un conjunto vacío, pero se encontrará todo lo que esté enterrado más allá de la raíz.

Entonces, ¿por qué estar limitado a la necesidad de saber cómo es esa estructura de datos con 100% de certeza, y por qué molestarse en tener que usar múltiples .filter() y .find() , y me atrevo a decir una .each() loop? ¡Yuck! Eso es simplemente demasiado trabajo y lleva demasiado tiempo.

Si desea .find() un elemento HTML particular devuelto por una llamada .ajax() , comience con la siguiente línea:

 var response = $('').html(data); 

¿Realmente puede ser tan fácil? De hecho, sí lo es! Lo que sucede aquí es que un nuevo elemento se está creando y convirtiendo en un objeto jQuery. Se usa una ubicación inicial para insertar el HTML devuelto desde una llamada .ajax() . Es como hacer $('html') en una página web. Con esto, puedes comenzar a encontrar elementos.

 response.find( ... ); // any jquery selector in place of the ellipsis. 

Aquí hay un ejemplo que usa la pregunta del cartel original:

 $.ajax({ dataType : 'html', url : 'path/to/example-page.html', success : function(data) { // set the returned contents in a new base  tag. var response = $('').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... } }); 

Obviamente, lo anterior necesitará un refinamiento si desea filtrar cualquier contenido no deseado o si desea refinar los valores devueltos.

Con eso, podría ver algo como el siguiente conjunto de ejemplo devuelto:

 [ "http://stackoverflow.com/", "http://www.google.com/" ] // and so on... 

Usando este enfoque, puede usar fácilmente el poder de .find() en cualquier información HTML devuelta a través de la función $.ajax() como lo hace en cualquier elemento que encuentre en el DOM. La verdadera ventaja es que no estás manipulando directamente el DOM para encontrar o hacer lo que quieres, lo cual es un proceso costoso.

Feliz fregado! =)

Suponiendo que los data son una cadena de HTML, puede hacer esto:

 $(data).find('a'); 

Eso devolverá los enlaces sin agregar los datos al DOM.

Primero debe definir un contenedor para poder obtener / modificar los elementos de la respuesta:

  $.ajax({ url: url + "/ajax.htm", dataType: "html", success: function(html) { container = $('#ajax_content'); container.html(html); container.find("a").css("background","red"); } }); 

Claro que puede usar la función $ (datos), una de las funciones centrales de jquery, para convertir el html devuelto en elementos DOM. Mira los documentos en línea .

También puede usar el contexto ahora (no sé cuándo se introdujo esto):

 $.get('some/url', '', function (data) { $("#domelement", data); } ); 

Esto es lo mismo que la respuesta aceptada pero con alguna explicación adicional.

Puede usar el parámetro de contexto jQuery Enlace a documentos

Realmente no puedo explicar mejor que la documentación.

Contexto del selector

De forma predeterminada, los selectores realizan sus búsquedas dentro del DOM a partir de la raíz del documento. Sin embargo, se puede dar un contexto alternativo para la búsqueda utilizando el segundo parámetro opcional para la función $ ()

El parámetro de contexto ha estado presente desde jQuery v1.0

Por lo tanto, una solución al ejemplo del OP para “obtener todos los valores href de cualquier etiqueta LINK contenida en el HTML contenido en ‘datos’ sin agregarlo primero al DOM” sería:

 success: function(data){ $("a", data).each(function(){ console.log( $(this).attr("href") ); }); } 

mi última solución fue

 jQuery.ajax({ url: "/some-url", cache: false, dataType: "html", success: function(data) { jQuery("#target").html( jQuery(data).find('#ajax-data')); } });