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

Question

我有一个 xml 函数，用于加载数据并附加到 div。 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 函数不追加文本字符串，而是追加元素，因此您将图像作为 sibling 而不是子元素附加到 div.thumb