Manipulando los "datos" de $ .ajax éxito: función (datos) {

Question

Tengo esto y una pregunta simple para él.

$.ajax({ 
    type: "POST", 
    url: "/", 
    data: $(".form").serialize(), 
    dataType: "html", 
    success: function (data) { 
     $("#id").html(data); 
    } 
}); 

Dentro de "data" hay algunos html que estoy insertando en el DOM. Eso no es un problema. Pero quiero manipular los "datos" antes de hacerlo. ¿Cómo puedo hacer eso? Por ejemplo, hay algunos elementos li en "datos". ¿Cómo podría, por ejemplo, eliminar el último elemento li de la cadena de "datos" antes de insertarlo en el DOM?

he intentado algo así como

$(data li:last)remove(); 

... pero eso no funcionó.

Gracias por su ayuda.

Answer 1

No necesita un DIV oculto. Si desea convertir una cadena html en un fragmento DOM, simplemente llame a jQuery. En su ejemplo:

success: function(data) { 
    var jqObj = jQuery(data); 
    jqObj.find("li:last").remove(); 
    $("#id").empty().append(jqObj); 
} 

Algunas consideraciones IE sin embargo:

• Si los datos es grande, jQuerifying en contexto es lento en el IE (al menos con jQuery 1.2.6). En ese caso, es posible que desee crear un contenedor para él como var div = jQuery("<div/>"); div.html(data); y luego manipularlo allí antes de hacer $("#id").html(div.html()).
• Si sus datos tienen HTML no válido (etiquetas no cerradas, etc.) puede obtener errores extraños en IE. Solo asegúrate de que el html esté bien formado.

Answer 2

Los datos devueltos son una cadena, y no se pueden encontrar en dom a través de jQuery hasta que estén en el DOM. Tendrá que analizar esta cadena y extraer los datos que necesita, o editarlos después de insertarlos en el DOM.

Answer 3

Jay's answer tiene razón; deberá insertar los datos HTML en el DOM primero (o analizar la cadena, lo que parece engorroso). Lo que puede hacer es agregar los datos a un DIV oculto, modificarlo, luego copiar los datos en un elemento DOM diferente o simplemente mostrar el DIV

Answer 4

Se puede crear un objeto jQuery de HTML arbitrario, por ejemplo:

$('<ul><li>Item</li></ul>'); 

Así, se podría hacer algo como esto:

success: function(data) { 
    var $list = $(data); 

    $list.find('li:last').remove(); 

    // Do something with $list here, like append(). 
} 

Aquí está un ejemplo de trabajo se puede jugar con en JS Bin: http://jsbin.com/ejule3/edit