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。如何隐藏除了每个班级的第一个以外的所有图像？

在这个例子中，我只想看到第一个“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
});

使用

show() ，以显示所选项目
hide() ，隐藏所选项目。

Answer 2

老派方法：

var slice = Array.prototype.slice,
    imgs = slice.call(document.getElementsByTagName('img')),
    img, ct, cls;
while (img = imgs.shift()) {
    if (cls === img.className) {
        ct = img.parentNode;
        ct.parentNode.removeChild(ct);
    } else {
        cls = img.className;
    }
}

Yuk确实......

使用jQuery，我会做同样的事情：

var prevCls;
$('img').each(function () {
    var cls = $(this).attr('class'); // I have a doubt about .className support
    if (prevCls === cls) {
        $(this.parentNode).remove(); // or .hide() if preferred
    } else {
        prevCls = cls;
    }
});

与已接受的答案相比的优势：单循环。

这是使用递归的另一种方法 - 非常接近第一种方法：

(function deldup(list, prevCls) {
    var item = list.shift();
    if (item.className !== prevCls) {
        prevCls = item.className;
    } else {
        item = item.parentNode;
        item.parentNode.removeChild(item);
    }
    if (list.length) {
        deldup(list, prevCls);
    }
})(
    Array.prototype.slice.call(
        document.getElementsByTagName('img')
    )
);

优势：没有全局变量。

如果图像混合：

(function deldup(list, cls) {
    var item = list.shift();
    if (!cls[item.className]) {
        cls[item.className] = true;
    } else {
        item = item.parentNode;
        item.parentNode.removeChild(item);
    }
    if (list.length) {
        deldup(list, cls);
    }
})(
    Array.prototype.slice.call(
        document.getElementsByTagName('span')
    ), {} // notice this empty object
);

演示：http://jsfiddle.net/wared/QpZD5/。

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

2 个答案: