为什么这个 jquery 选择器不能识别这些图像

Question

我有一个用于加载数据并附加到 div 的 xml 函数。 div.thumb img 的 css 和 jQuery 没有选择图像。

JavaScript：

$(document).ready(function () {
    function loadfail() {  alert("Error: Failed to read file!");  }    

    //Load xml data
    function parse(document) {
        $("#thumbs").append('<div class="thumb">');

        $(document).find("entry").each(function () {
            var image = $(this).find('image').text();          

            $("#thumbs").append('<img src="Styles/images/' + image + '" width="64" height="64" />');           

        });

        $("#thumbs").append('</div>');

        $('div.thumb img').click(function () {
            $('#expandedimage').slideToggle(1000);
        });
    }

    $.ajax({
        url: 'appdata/data.xml',    // name of file with our data  
        dataType: 'xml',       // type of file we will be reading  
        success: parse,        // name of function to call when done reading file 
        error: loadfail        // name of function to call when failed to read 
    });
});

CSS：

div.thumb { float:left ; padding: 1px; }
div.thumb img { border: 2px solid white; }

HTML 标记：

<div id="body">
    <div id="expandedimage">
        Toggled Image
    </div>
    <hr />
    <div id="thumbholder">                
        <div id="thumbs">
            <!-- image(s) here! -->
        </div>
        <hr />
    </div>        
</div>  

代码在每个图像放置一个 div 时起作用，而不是将所有图像放在一个 div 中：

$("#thumbs").append('<div class="thumb"><img src="Styles/images/' + image + '" width="64" height="64" /></div>');

但是，第二个<br /> 没有出现图像。

那么我的问题是，为什么当我有一个 div 和该 div 中的图像时，div.thumb img 不起作用。

Answer 1

我想你误解了 append 函数。您应该附加有效的 xml/html。尝试一些类似的东西。

function parse(document) {

 var containerDiv = $("#thumbs").append('<div class="thumb" />');

  $(document).find("entry").each(function () {
    var image = $(this).find('image').text();          

    containerDiv.append('<img src="Styles/images/' + image + '" width="64" height="64" />');           

  });


containerDiv.find('img').click(function () {

    $('#expandedimage').slideToggle(1000);
});
}

append 函数不会附加文本字符串，而是附加元素，因此您将图像作为同级附加到 div.thumb 而不是作为子级