Question

I’ve got a div in which I’ve loaded some HTML. What I would like to do is is to somehow get the first image from this div (I need to search for “img” since I can’t control their classes/IDs) and put it as a thumbnail in a listview. Any ideas?
It’s for a phonegap application using jquery/html5 for Android and iPhone.

Answer 1

Example:

• 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>​