使用jQuery显示具有相应文本/URL的动态图像列表

我有一个web服务，它会返回一个图像列表，当用户以XML格式单击这些图像时，需要重定向到这些图像的标题和URL。我需要建立一个水平排列的这些可点击图像的动态列表，我需要使用jQuery或javascript来实现这一点。是否有任何已知的组件可以执行此操作？我需要从头开始写吗？如果我这样做了，我该怎么做呢

我建议使用将XML放入jQuery对象中，然后遍历该对象以填充可观察对象的淘汰可观察数组。有关如何使用knockout进行动态绑定的示例，请参见。我会使用一个无序的列表来呈现每个带有标题和链接的图像。您可以根据需要设置列表的样式

浏览到javascript中的knockout.js教程-Nd，添加：

function SiteItem(u, t, s) {
    var self = this;
    self.url = ko.observable(u);
    self.title = ko.observable(t);
    self.imgSrc = ko.observable(s);
}

// Overall viewmodel for this screen, along with initial state
function ViewModel() {
    var self = this;

    // Editable data
    self.items= ko.observableArray([
        new SiteItem('http://www.google.com/', 'Test', 'http://www.google.com/images/srpr/logo3w.png'),
        new SiteItem('http://www.google.com/', 'Test', 'http://www.google.com/images/srpr/logo3w.png')
    ]);
}

ko.applyBindings(new ViewModel());

然后在HTML中，UL的淘汰模板：

<h2>Your images</h2>

<ul class="horizontal-list" id="sites" data-bind="foreach: items">
    <li class="site" data-bind="attr: { 'data-url': url }">
    <a data-bind="text: title, attr: { href: url }"></a>
    <img data-bind="attr: { src: imgSrc, alt: title }" />
    </li>
</ul>

你的图像

使用

$.ajax

检索xml，然后需要将其解析为html。在web上有很多关于如何做到这一点的教程，关键字

ajaxxml教程

。xml看起来像什么，输出需要看起来像什么？解析xml真的不是问题。问题是，一旦我有了一个包含图像列表及其详细信息的对象，我如何动态生成图像列表。使用knockout生成listviperguynaz-你能给我一个示例吗？我找不到任何有用的图片链接…在答案中添加了一个代码示例-关于Thank viperguynaz有很多教程和示例。我真的想做一个基本的例子，但这不起作用