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> 

Класс изображения динамический, в зависимости от идентификатора изображения в базе данных. Как я могу скрыть все изображения, кроме первого из каждого класса?

В этом примере я хочу увидеть только первый класс «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/.