Manipuler les "données" de $ .ajax succès: fonction (données) {

Question

J'ai ceci et une question simple à lui.

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

À l'intérieur "données" est un certain HTML que j'insère dans le DOM. Ce n'est pas un problème. Mais je veux manipuler les "données" avant de le faire. Comment puis je faire ça? Par exemple, il y a quelques éléments li dans "données". Comment supprimer par exemple le dernier élément li de la chaîne "data" avant de l'insérer dans le DOM?

J'ai essayé quelque chose comme

$(data li:last)remove(); 

... mais ce ne fonctionnait pas.

Merci pour votre aide.

Answer 1

Vous n'avez pas besoin d'un div DIV. Si vous voulez convertir une chaîne html en un fragment DOM, appelez simplement jQuery. Dans votre exemple:

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

Quelques considérations IE si:

• Si vos données est grande, jQuerifying en place est lente dans IE (au moins avec jQuery 1.2.6). Dans ce cas, vous pouvez créer un conteneur comme var div = jQuery("<div/>"); div.html(data); puis le manipuler avant de faire $("#id").html(div.html()).
• Si vos données ont un code HTML invalide (tags non fermés, etc.), vous risquez d'avoir des défaillances bizarres dans IE. Assurez-vous simplement que le code HTML est bien formé.

Answer 2

Les données renvoyées sont une chaîne et ne peuvent être trouvées dans dom via jQuery tant qu'elles ne se trouvent pas dans le DOM. Vous devrez analyser cette chaîne et extraire les données dont vous avez besoin, ou les éditer après l'insertion dans le DOM.

Answer 3

Jay's answer est correct - vous devrez d'abord insérer les données HTML dans le DOM (ou analyser la chaîne, ce qui semble lourd). Ce que vous pouvez faire est d'ajouter les données à un DIV caché, le modifier, puis copier les données dans un autre élément DOM ou simplement afficher le DIV

Answer 4

Vous pouvez créer un objet jQuery de HTML arbitraire, par exemple:

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

Donc, vous pourriez faire quelque chose comme ceci:

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

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

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

Voici un exemple de travail, vous pouvez jouer avec sur JS Bin: http://jsbin.com/ejule3/edit