jQuery – 2 – XML verarbeiten

In diesem Beispiel möchte ich zeigen wie man mit jQuery eine externe XML Datei verarbeiten kann.

Mein Beispiel soll eine kleine Bildergallerie zum Ergebnis haben. Alle Daten für die Bilder (Pfad und weitere Infos) werden in einem leicht zu bearbeitendem XML File gespeichert. Die Verarbeitung erfolgt mit jQuery und die Darstellung natürlich in HTML.

Hier mein Beispiel zum ausprobieren: XML Bildergallerie mit jQuery

Hier findet ihr die dazugehörige XML Datei.

Los gehts

$(document).ready(function(){
 $.get("jquery_xml.xml",{},function(xml){
  $('photo',xml).each(function(i) {

Die erste Zeile sollte nun klar sein. Mit $(document).ready(function() {}); wird sichergestellt daß das Dokument soweit geladen ist das es ohne Fehler manipuliert werden kann.

Dann holen wir uns das XML mit der Methode get. In der dritten Zeile bauen wir eine kleine Schleife mit each. Für jedes Element im XML File mit dem Namen photo soll eine Funktion i ausgeführt werden.

Die Funktion – XML auslesen

var imgPlace = $(this).find("place").text();
var imgTitle = $(this).find("desc").text();
var imgAddi = $(this).find("addi").text();

Hier schaut ihr euch am besten das zugehörige XML File an. Ich lege 3 neue Variablen an und weise diesen die Elemente place, desc und addi aus dem XML zu.

find sucht nach allen Elementen die in der Klammer folgen.
text legt fest das ich als Rückgabewert einen String haben möchte.

Die Funktion – HTML bauen

var output = '<div style="float:left; border:1px solid #c0c0c0; margin:10px;">';	
output += '<img class="loading" src="loading.gif" />';
output += '<img src="'+ imgPlace + '" /><br />';
output += '<b>'+ imgTitle +'</b><br />';
output += '<i>'+ imgAddi +'</i><br />';	
output += '<u>Bild: '+ ++i +'</u><br />';					
output += '</div>';

Wir beginnen einen DIV Tag .. faul wie ich bin hab ich die CSS Angaben einfach direkt reingeschrieben. Natürlich sollte man die CSS Angaben in ein externes Stylesheet auslagern.

img class=“loading” src=“loading.gif” zeigt die kleine Preloadgrafik an die nach kurzer Zeit ausgeblendet wird. In den folgenden Zeilen werden die vorher angelegten Variablen nun im HTML verarbeitet. Mit *Bild: ‘+ ++i +’ lege ich eine fortlaufende Bildnummer fest dich bei jedem Durchlauf um 1 erhöhe. Am Ende wird der DIV Tag wieder geschlossen.

In den Quelltext hängen

$("#inhalt").append(output);
$('.loading').fadeOut(1400);

In der ersten Zeile wird der Inhalt der Variablen output dem DIV Element inhalt im BODY Tag angehängt. Dies geschieht für jeden Durchlauf.

In der zweiten Zeile wir das Element mit der Klasse loading nach 1400 Millisekunden ausgeblendet. Somit verschwindet die Loading Grafik.

Hier nochmal die verwendeten Files:

Quelltext als HTML
Hier der Quelltext als TXT
Und das XML

Leave a Reply

Your email address will not be published. Required fields are marked *