JQuery & XML корректирующий фон

Question

У меня есть следующая проблема, и я не знаю, как это решить.

У меня есть файл XML, который выглядит следующим образом:

<Item active="true" price="29.71" artnr="11123" group="fish" 
     groupdescription="Fisch-Conv." headline="SeaWater 
     src="images/test.png" 
     /> 

в основном я нуждаясь найти группу VI в JQuery, и если это, например, «рыбы», то она будет изменять фоновое изображение на другое один и т. д. четвертый, т. е. если группа «стержни», то будет показано другое изображение .. и если нет группы, она должна взять фоновое изображение по умолчанию, которое находится в теле css.

Кто-нибудь знает, как это можно сделать?

Answer 1

Рассмотрим этот XML:

<?xml version="1.0"?> 
    <Items> 
     <Item active="true" price="29.71" artnr="11123" group="fish" groupdescription="Fisch-Conv." headline="SeaWater" src="images/test.png"/> 
     <Item active="true" price="29.71" artnr="11123" group="rods" groupdescription="Fisch-Conv." headline="SeaWater" src="images/test.png"/> 
     <Item active="true" price="29.71" artnr="11123" group="none" groupdescription="Fisch-Conv." headline="SeaWater" src="images/test.png"/> 
    </Items> 

Я бы хранить это в строку, а затем запустить ParseXML() над ним, который я бы толчок в переменной, как это:

var xmlDoc= $.parseXML(myXmlString) 

Теперь я мог бы использовать эту переменную xmlDoc как объект DOM и проходить через нее, если необходимо, передав ее в $() в качестве аргумента.

$(xmlDoc) 

Теперь вы можете прочитать на find(), closest() и т.д., и узнать до того, как вы пройти в JQuery.

Например, если я хочу, чтобы получить group первого Item, который лежит в <Item> разделе, я бы это сделать:

$("Items", xmlDoc).find("item") 

Тогда вы бы собрать это в массиве и петля над ним, чтобы установить ваш bg:

var groups = $("Items", xmlDoc).find("Item").map(function() { 
    return $(this).attr("group"); 
}); 
var $span = $("<span/>"); 

$.each(groups, function (i, group) { 
    var $spanClone = $span.clone().attr("class", group).html("Class added :" + group + "</br>"); 
    $spanClone.appendTo("div"); 
}); 

Всё. Вот демо-версия: http://jsfiddle.net/hungerpain/N3mYa/3/