显示id中的第一个图像

Question

有兴趣知道我是否可以使用jQuery找到页面上的第一个图像，并将其显示在调整大小的缩略图中，单击放大。例如，在这个特定的博客上，当客户端将图像添加到帖子中时，jQuery将找到第一个图像，并在特定位置将其显示为可点击的缩略图。这将是理想的，如果详细的图像可以显示在厚框，脸谱框或其他jQuery覆盖窗口。

提前感谢你的点子。杰克逊

Answer 1

您可以使用:first选择器查找第一个映像，然后使用克隆将映像复制到任何其他位置并从那里对其进行修改。

$(document).ready(function() {

    var firstImage = $('img:first');
    var link = $('<a />')
                    .attr('href', '#')
                    .append($('img:first').clone().css({ width:100, height:100 }))
                    .append($('<div />').text('Click to Enlarge'))
                    .click(function(e) {
                        e.preventDefault();
                        // showDialog();
                    });
    $('.imageThumbnail').append(link);

    $('.imageDialog').append(firstImage.clone());

});

Answer 2

要查找页面中的第一个图像，可以使用选择器。

$("img:first")将选择第一个img元素。

如果要将搜索限制在父元素内，则可以

$("#parentElemId").find("img:first")

如果您可以为这些图像元素指定一个类名，那么您可以这样做

$("img.classname:first")

Answer 3

就像其他成员提到的，你可以使用img:first获取第一张图片。将其显示为缩略图的最简单方法是：

$(document).append("<img src='" + $("img:first").attr("src") + "' alt='' class='thickbox' style='width: 50px; height: 50px;' />");

class='thickbox'部分用于thickbox插件

这是一个基于你的评论的更具体的示例：

如果原始数据看起来像这样：

<div id="thumbs"></div>
<div id="article">
    <img src="..." alt="" />
    Some text..
</div>

您可以使用类似以下内容：

var images = "";

$("#article img:first").each(function() {
    images += "<img src='" + $(this).attr('src') + "' width='45' class='thickbox' alt='Click to enlarge' /> ";
});

$("#thumbs").append(images);