Avant de commencer, jetons un rapide coup d'oeil à ce que fait jQuery de base de la page HTML renvoyée par un $.ajax() appel, et de convertir les données renvoyées dans un objet 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) );
}
});
Voici ce à quoi vous pouvez vous attendre à voir:
[
0 <TextNode textContent="\n\n\n\n\n ">
1 title
2 <TextNode textContent="\n ">
3 meta
4 <TextNode textContent="\n\n\n\n\n">
5 div#container
6 Comment { data=" #container ", length=12, nodeName="#comment", more...}
7 <TextNode textContent="\n\n">
jquery "1.6.4"
length 8
selector ""
// additional data and functions removed for brevity
]
OUPS! C'est assez moche! Tenter de faire quelque chose qui peut donner des résultats, mais vous devez savoir ce que la structure de données ressemble à chaque fois, et où les données se trouvent dans cet objet. C'est que les données à la racine, ou est-il enterré à l'intérieur?
Comme les années précédentes affiches ont mentionné, vous pouvez utiliser .filter(), mais la racine est aussi loin que la recherche va aller, parce que vous êtes tout simplement de filtrage, les résultats retournés. Toutefois, si vous utilisez .find() , à ce point, et l'élément que vous voulais, à la base, vous recevrez un ensemble vide, mais rien enterré au-delà de la racine peut être trouvé.
Alors, pourquoi être clouée au sol pour avoir besoin de savoir ce que la structure de données ressemble avec 100% de certitude, et pourquoi s'embêter à passer par tous les tracas d'avoir à utiliser plusieurs .filter() et .find() des appels, et oserais-je dire un .each() boucle? Beurk! C'est tout simplement trop de travail et prend beaucoup trop de temps.
Si vous souhaitez .find() un particulier de l'élément HTML retourné à partir d'une .ajax() appel, à commencer par la ligne suivante:
var response = $('<html />').html(data);
Peut-il vraiment être aussi simple que ça? En fait, oui il l'est! Ce qui se passe ici est un nouveau <html> élément est en cours de création et converti en un objet jQuery. Il est utilisé une position de départ pour insérer le code HTML renvoyé à partir d'un .ajax() appel. C'est un peu comme faire de la $('html') sur une page web. Avec cela, vous pouvez commencer à trouver des éléments.
response.find( ... ); // any jquery selector in place of the ellipsis.
Voici un exemple qui utilise l'affiche originale de la question:
$.ajax({
dataType : 'html',
url : 'path/to/example-page.html',
success : function(data) {
// set the returned contents in a new base <html> tag.
var response = $('<html />').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...
}
});
Évidemment, le ci-dessus aura besoin d'un peu de raffinage si vous souhaitez filtrer tout contenu indésirable, ou vous voulez affiner les valeurs renvoyées.
Avec cela, vous pourriez voir quelque chose comme l'exemple suivant tableau retourné:
[ "http://stackoverflow.com/", "http://www.google.com/" ] // and so on...
En utilisant cette approche, vous pouvez facilement utiliser la puissance de l' .find() sur le contenu HTML les données renvoyées par le biais de l' $.ajax() fonction comme vous le faites déjà sur tous les éléments que vous trouverez dans les DOM. Le réel avantage est que vous n'êtes pas directement en manipulant le DOM pour trouver ou faire ce que vous voulez, ce qui est un processus coûteux.
Heureux frotter! =)
