javascript - JQuery和XML调整背景

Question

我遇到以下问题，但我不知道如何解决此问题。

我有一个如下所示的 xml 文件:

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

基本上，我需要通过 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")

然后，您将其收集在一个数组中并循环它以设置您的背景:

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/