Javascript 使用JQuery解析XML属性时，会不断重复写入相同的属性，而不是全部属性

我试图通过一个AJAX调用构建两个无序列表，在XML中引用多个成员组，然后通过JQuery写入HTML。每个成员组都有一个带有数字的标记，我将其作为属性添加到呈现的HTML中。我的问题是，它不断重复正在编写的每个LI中的最后一个成员组标记，而不是按顺序重复所有成员组标记

我需要李的像这样：

    <li id="1">description 1</li>
    <li id="2">description 2</li>
    <li id="3">description 3</li>
    <li id="4">description 4</li>

    <li id="4">description 1</li>
    <li id="4">description 2</li>
    <li id="4">description 3</li>
    <li id="4">description 4</li>

应该是

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "http://chunchmeow.com/users.xml",
        cache: false,
        dataType: "xml",
        success: function (xml) {
            var $bio = $('.bio > ul');
            var $thumbnails = $('.thumbnails > ul');
            $(xml).find('member').each(function () {
                var $this = $(this),
                    id = $this.find('id').html();

                $('<li />', {
                    id: 'bio-' + id,
                    html: $this.find('bio').html()
                }).appendTo($bio);
                $('<li />', {
                    id: 'thumb-' + id,
                    html: '<a href="#">' + $this.find('photo').html() + '</a>'
                }).appendTo($thumbnails);
            });
        }
    });
});

$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“http://chunchmeow.com/users.xml",
cache:false，
数据类型：“xml”，
成功：函数（xml）{
变量$bio=$（'.bio>ul'）；
var$thumbnails=$（'.thumbnails>ul'）；
$（xml）.find（'member'）.each（函数（）{
变量$this=$（this），
id=$this.find（'id'）.html（）；
$（“
”{
id:'生物-'+id，
html:$this.find（'bio'）.html（）
}).appendTo（$bio）；
$（“
”{
id:'拇指-'+id，
html:'
}).appendTo（$缩略图）；
});
}
});
});

当您在

成员

循环的末尾设置id而不是针对特定的

li

时，您针对的是

bio

和

缩略图下的所有
li
元素

注意：您正在创建具有相同id的多个元素，这是无效的，因为一个元素的id在页面中必须是唯一的-分别为
bio
和
thumb-
添加前缀，如
bio
和
thumbnails
id

演示：
问题在于，您正在使用选择器查找要放置id的列表元素。您将在当时存在的每个列表元素上设置每个id。当您处于最后一个项目时，它将覆盖以前所有项目的id

保留对您创建的列表项的引用：

var bioItem = $('<li>' + bio + '</li>').appendTo( ".bio > ul" );    


但是，元素的id在页面中应该是唯一的，因此不建议在两个元素上设置相同的id

此外，使用数字id可能会有问题，您可能希望为数字添加前缀，例如：

bioItem.attr('id', 'bio' + id);
photoItem.attr('id', 'photo' + id); 

你能展示整个呈现的html吗？天哪，效果很好，谢谢！！我被困了好几个小时，这让我发疯了！我也不知道如何全球化这些变量。
var photoItem = $('<li><a href="#">' + photo + '</a></li>').appendTo( ".thumbnails > ul" );

bioItem.attr('id', id);
photoItem.attr('id', id);   

bioItem.attr('id', 'bio' + id);
photoItem.attr('id', 'photo' + id);