html – 选择具有相同类的2个div中的最后一个img

我有两个具有相同类.productList的div,并且想要操纵第二个< img>在两个div中使用jQuery.

我有以下几点;

$('div.productList').each(function(){
    $('img:last-child').css('margin-left','10px');
});

标记(部分)

<div class="productList">
<img src="images/parts/" width="120" height="120" alt="" title="" />
<img class="last" src="images/parts/" width="120" height="120" alt="" title="" />

我假设使用.each()会循环遍历每个div并找到最后一个img,但这对我不起作用.

请问有人请指出我正确的方向吗？

谢谢.

解决方法

“更好”的纯CSS方式

我同意Ethan您应该使用CSS来做到这一点,但是,使用last-child选择器(正如他所推荐的)只有在img标签实际上是.productlist中的最后一个html元素时才会起作用(即没有其他div,span等遵循img标签 – see example).由于您只显示了部分标记,因此我完全不清楚.如果它只是一系列img标签,那么使用Ethan的答案,否则……

更好的CSS3解决方案是使用last-of-type,因为它只会查找正在寻找的类型的元素(在本例中为img).因此,如果其他元素遵循它,it does not matter.

.productList img:last-of-type {
    margin-left: 10px;
}

对于不支持CSS3的旧浏览器,如果你的两个img标签实际上是在你的标记中一个接一个地坐着,并且它们是.productList中唯一配对的img标签,那么这些旧浏览器的解决方案(也可以工作)在较新的CSS3浏览器中)将是use the adjacent sibling selector：

.productList img + img {
    margin-left: 10px;
}