使用xml和jquery在同一节点中加载一组图像

Question

当我单击缩略图时，我正试图加载与我的节点相对应的多个图像。

我可以让它在点击时加载1个图像，但我需要加载多个图像。我是

用xml加载我的缩略图。

var $container = $('.window_body');
var images = new Array();
var id = 0;
init();
function init() {
    $('<div class = "thumbnail_layout layout_type"></div>').appendTo('.window_body');
    $.get('sites.xml', function (d) {
        $(d).find('site').each(function (i, l) {
            var imageUrl = $(this).find('imgurl').text();
            var title = $(this).find('title').text();
            var url = $(this).find('url').text();
            var brief = $(this).find('brief').text();
            var long = $(this).find('long').text();
            var classa = $(this).find('_class').text();
            images[i] = $(this).find('img').text();
            $('<div id="' + "p" + i + '" class="' + classa + '"></div>').html('<a> <img src="' + imageUrl + '" class="thumbnail" />' + '<h1>' + title + '</h1> </a>').appendTo('.thumbnail_layout');
        });
        $(".item").click(function () {
            var index = $(this).prevAll().length;
            var datelength = $(".item").length
            for(var i = 0; i <= datelength; i++) {
                if(i == index) {
                    $("#holder").empty();
                    $("#holder").prepend('<img id="my_img" src="' + images[i] + '" />');
                } else {}
            }
        });
    })
}

XML:

<?xml version="1.0" encoding="iso-8859-1"?>
<sites>
    <site>
        <imgurl>images/thumbnail_big_a.jpg</imgurl>
        <title>test</title>
        <url>http://www.1.com</url>
        <desc>
            <brief>brief description.</brief>
            <long>long description</long>
        </desc>
        <bimgurl>
            <img>images/thumbnail_big_a.jpg</img>
            <img>images/thumbnail_big_b.jpg</img>
            <img>images/thumbnail_big_a.jpg</img>
        </bimgurl>
        <_class>item red</_class>
    </site>
</sites>

Answer 1

您可以存储从$（this）.find（'img'）获得的节点集，而不仅仅是文本：

        images[i] = $(this).find('img').text(); 

然后在点击处理程序中执行以下操作：

images[i].each(function() {
    $("#holder").prepend('<img id="my_img" src="' + $(this).text + '" />');  
};