jquery - 将 div 中的图像作为缩略图加载到 ListView

Question

我有一个 div，我在其中加载了一些 HTML。我想做的是以某种方式从这个 div 中获取第一张图像（我需要搜索“img”，因为我无法控制它们的类/ID）并将其作为缩略图放在列表视图中。有任何想法吗？它适用于 Android 和 iPhone 上使用 jquery/html5 的 phonegap 应用程序。

Answer 1

例子：

• http://jsfiddle.net/MeyvK/1/

JS：

// Append each image to the list
$('img').each(function() {
    var imageList = $('#thumbs');

    imageList.append('<li><a href="#"><img src="'+this.src+'"><h3>Thumbnail Title</h3><p>Thumbnail Description</p></a></li>');
});

// Refresh jQM Controls
$('#thumbs').listview('refresh');

HTML：

<!-- images -->
<img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-p.jpg" alt="full size image" />
<img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-xx.jpg" alt="full size image" />
<img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-ok.jpg" alt="full size image" />

<br />

<ul data-role="listview" id="thumbs">
    <li><a href="#">
        <img src="http://jquerymobile.com/demos/1.1.1/docs/lists/images/album-hc.jpg" />
        <h3>Thumbnail Title</h3>
        <p>Thumbnail Description</p>
    </a></li>
</ul>​

Answer 2

这可能有点通用，因为您没有提供任何 HTML，具有这样的结构

文本

更多文字

您可以使用以下 Jquery 检索第一个 img

$(document).ready(function() {
   var html = $("div img:first").attr('src');
    $("#list").append("<li><img src="" + html + "" /></li>");
});

这将检索 div 中第一个 img 标记的 src 属性，并将图像附加到您的列表中。

这是你追求的那种东西吗？