Manipolare i "dati" da $ .ajax success: function (data) {

Question

Ho questa e una domanda semplice.

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

All'interno "dati" è un html che sto inserendo nel DOM. Non c'è problema. Ma voglio manipolare i "dati" prima di farlo. Come lo posso fare? Per esempio ci sono alcuni elementi li in "data". Come faccio ad esempio a cancellare l'ultimo elemento li dalla stringa "data" prima di inserirlo nel DOM?

ho provato qualcosa di simile

$(data li:last)remove(); 

... ma che non ha funzionato.

Grazie per il vostro aiuto.

Answer 1

Non hai bisogno di un DIV nascosto. Se vuoi convertire una stringa html in un frammento DOM, chiama semplicemente jQuery su di esso. Nel tuo esempio:

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

Alcune considerazioni IE però:

• Se i dati sono di grandi dimensioni, jQuerifying in-posto è lenta in IE (almeno con jQuery 1.2.6). In tal caso potresti voler creare un contenitore come var div = jQuery("<div/>"); div.html(data); quindi manipolarlo lì prima di fare $("#id").html(div.html()).
• Se i tuoi dati hanno un codice HTML non valido (tag non chiusi, ecc.) Potresti trovare strani errori in IE. Assicurati che l'html sia ben formato.

Answer 2

I dati restituito è una stringa, e non può essere trovato nel DOM tramite jQuery fino a quando è in realtà nel DOM. Sarà necessario analizzare questa stringa e estrarre i dati richiesti oppure modificarli dopo averli inseriti nel DOM.

Answer 3

Jay's answer ha ragione - è necessario inserire prima i dati HTML nel DOM (o analizzare la stringa, che sembra macchinosa). Quello che puoi fare è aggiungere i dati ad un DIV nascosto, modificarlo, quindi copiare i dati su un altro elemento DOM o mostrare semplicemente DIV

Answer 4

È possibile creare un oggetto jQuery da HTML arbitrario, ad esempio:

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

Quindi, si potrebbe fare qualcosa di simile:

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

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

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

Ecco un esempio di lavoro che si può giocare con su JS Bin: http://jsbin.com/ejule3/edit