CODEWITHSUNDEEP
javascriptjquery
crispychicken
crispychicken

Reputation: 2662

jQuery hide all images except first

I have a data collection thats gets rendered from the server. This is how the HTML might looks like:

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

The image class is dynamic depending on the id of the image in the database. How can I hide all images except the first one of every class?

In this example I only want to see the first "image_98", "image_99" and "image_100" class.

Upvotes: 1

Views: 1257

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115212

You can do it like this, using attribute selector [attribute="value"] and each() method

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

Use

  1. show() , to show the selected item
  2. hide() , to hide the selected item.

Upvotes: 4

user1636522
user1636522

Reputation:

Old school method :

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 indeed...

Using jQuery, I would do quite the same :

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

Advantage comparing to the accepted answer : a single loop.

Here is another method using recursivity - quite close to the first one :

(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')
    )
);

Advantage : no global variables.

In case images are mixed :

(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
);

Demo : http://jsfiddle.net/wared/QpZD5/.

Upvotes: 1

Related Questions