By my own admission I have bee quite a petent user of jQuery without much knowledge of the javascript that goes on behind it.

Just lately I have attempted to find a promise when weighing up whether it is worth importing the jQuery framework for relatively small tasks. And as a learning exercise to attempt to a least think about how it could be achieved without jQuery.

I'm currently working on something where jQuery is not an option. (Large organisation with practices set in stone).

I am able to select an image using it's source with jQuery however could anyone explain how to do this in plain javaScript.

$('img[src*="pic.gif"]').hide();

Many thanks Gary

By my own admission I have bee quite a petent user of jQuery without much knowledge of the javascript that goes on behind it.

Just lately I have attempted to find a promise when weighing up whether it is worth importing the jQuery framework for relatively small tasks. And as a learning exercise to attempt to a least think about how it could be achieved without jQuery.

I'm currently working on something where jQuery is not an option. (Large organisation with practices set in stone).

I am able to select an image using it's source with jQuery however could anyone explain how to do this in plain javaScript.

$('img[src*="pic.gif"]').hide();

Many thanks Gary

• javascript
• jquery

3 Answers 3

Like so:

function findImagesByRegexp(regexp, parentNode) {
   var images = Array.prototype.slice.call((parentNode || document).getElementsByTagName('img'));
   var length = images.length;
   var ret = [];
   for(var i = 0; i < length; ++i) {
      if(images[i].src.search(regexp) != -1) {
         ret.push(images[i]);
      }
   }
   return ret;
}

var images = document.getElementsByTagName('IMG');
for (var i = 0; i < images.length; ++i) {
    if (images[i].src == "pic.gif")
        images[i].style.display = 'none';
}

Just select all images on page and filter their src with regexp or string functions:

var imgs = Array.prototype.slice.apply(document.getElementsByTagName('img')),
    resultImgs = [];
for (var i = 0; i < imgs.length; i++) {
    if (imgs[i].src.indexOf('img.gif') !== -1) {
        resultImgs.push(imgs[i]);
    }
}

Take attention to Array.prototype.slice.apply. It converts HTMLCollection which is returned by getElementsByTagName to regular array. This will improve speed of your script hundreds times.