javascript - jQuery 隐藏除第一个图像之外的所有图像

Question

我有一个从服务器呈现的数据集合。这就是 HTML 的样子:

<div>
  <img class="image_98" alt="..."  height="..." src="..." width="..." />
</div>
<div>
  <img class="image_99" alt="..."  height="..." src="..." width="..." />
</div>
<div>
  <img class="image_99" alt="..."  height="..." src="..." width="..." />
</div>
<div>
  <img class="image_100" alt="..."  height="..." src="..." width="..." />
</div>
<div>
  <img class="image_100" alt="..."  height="..." src="..." width="..." />
</div>
<div>
  <img class="image_100" alt="..."  height="..." src="..." width="..." />
</div>

图像类是动态的，具体取决于数据库中图像的 ID。我怎样才能隐藏所有图片，除了每个类(class)的第一张图片？

在此示例中，我只想查看第一个“image_98”、“image_99”和“image_100”类。

Answer 1

你可以这样做，使用属性选择器 [attribute="value"] 和 each() 方法

var img=$('[class^="image_"]');
img.hide(); //hide all image
img.each(function(){
    $('.'+this.className).eq(0).show(); // show first image in each class
});

使用

1. show() , 显示选中的项目
2. hide() ，隐藏所选项目。