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。 除了每個課程的第一個圖像，我如何隱藏所有圖像？

在此示例中，我只想看到第一個“ 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() ，隱藏所選項目。

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;
    }
}

的確是

使用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/ 。