Question

我使用jQuery从XML文件中提取一堆数据。我需要使用数据来填充图像路径，名称等。

收集所有这些数据的最佳方法是什么？例如，我得到的一切都是这样的：

 $(document).ready(function() {
                $.ajax({
                    type: "GET",
                    url: "stuff.xml",
                    dataType: "xml",
                    success: function(xml) {
                        $(xml).find('speaker').each(function(){
                            var img_path = $(this).find('speaker_image').text();
                            var name_text = $(this).find('speaker_name').text();
                            // should I build an array or object here?
                        });
                    }
                });
            });

我应该在成功方法中将所有内容都粘贴到数组中吗？也许在一个对象？我将做的是获取收集的数据并使用它来构建名称和图像列表。这里会有很多元素，它们看起来像（图片网址中使用img_path，标签使用name_text：

<ul>
<li><img src="images/bobsmith.jpg" /><br /><lable>Bob S. Smith</label></li>
<li><img src="images/crystalforehead.jpg" /><br /><lable>Crystal X. Forehead</label></li>
...
</ul>

处理收集的数据的最佳方法是什么，以便我可以使用它来构建我需要的html？

Answer 1

如果您不需要重复使用XML文件中的数据，为什么不在阅读时构建DOM元素呢？

例如，在您的成功方法中：

$(xml).find('speaker').each(function(){
    var img_path = $(this).find('speaker_image').text();
    var name_text = $(this).find('speaker_name').text();
    var html = '<li><img src="' + img_path + '" /><br /><label>' + name_text + '</label></li>';
    $("#myList").append(html);
});

Answer 2

这将使用push将检索到的结果放入数组中：

   success: function(xml) {
            var results = [];
            $(xml).find('speaker').each(function(){
                results.push($(this));
            });

Answer 3

如果需要重复使用，请将其放入数组对象中：

function linkItem(linkImage, linkText)
{
    this.linkImage = linkImage;
    this.linkText = linkText;
};

function mylist()
    this.speakerList = new Array();
    $(xml).find('speaker').each(function()
    {
        this.speakerList [$(this).index()] = new linkItem($(this).find('speaker_image').text(), $(this).find('speaker_name').text());
    };
};

如果您只使用一次，请构建它：

var myhtml = ""
$(xml).find('speaker').each(function(){ 
    myhtml = myhtml + '<li><img src="' + $(this).find('speaker_image').text() + '" /><br /><label>' + $(this).find('speaker_name').text() + '</label></li>'; 
});

然后使用它：

$(selector).append(myhtml);

或

$(selector).innerHtml(myhtml);

Javascript - 从XML获取数据供以后使用...放入数组或对象？

3 个答案: