jQuery find image by 'src' attribute - plain javascript

Question

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

Just lately I have attempted to find a compromise 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

Jacob Relkin · Accepted Answer · 2011-07-27 10:16:14Z

5

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

edited Jul 27, 2011 at 10:16

answered Jul 27, 2011 at 9:58

Jacob Relkin

164k34 gold badges352 silver badges321 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lazyhammer · Accepted Answer · 2011-07-27 09:59:01Z

2

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

answered Jul 27, 2011 at 9:59

lazyhammer

1,2281 gold badge11 silver badges14 bronze badges

Comments

bjornd · Accepted Answer · 2011-07-27 10:04:28Z

2

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.

edited Jul 27, 2011 at 10:04

answered Jul 27, 2011 at 9:57

bjornd

23k4 gold badges59 silver badges74 bronze badges

2 Comments

Jacob Relkin Over a year ago

I think you meant to use Array.prototype.slice.apply

bjornd Over a year ago

Yeah, fixed. Thanks. Works great now.

Collectives™ on Stack Overflow

jQuery find image by 'src' attribute - plain javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related