jquery + read multiple img src

Question

I have around 8 img src tags that start like this:

<img src="" id="joinCityResponse" class="joinResponse"/>

If a related question is answered correctly then jQuery adds in the src field. src="http://www.staticimages.co/dating/online-dating-index/join_tick.png"

At the end of the 8 questions I have a Join Now button and I need to be able to know if all the questions have been answered correctly. eg: have the above src url set.

How can I use jQuery to check all img tags with the class 'joinResponse' have the scr as set above?

What are you talking about? jQuery does not add that. Also, jQuery is not an acronym. — SLaks
– SLaks, Commented Dec 18, 2011 at 3:07
hm... wouldn't it be easier and better to just keep track of how many are correct with a variable or something? — Joseph Marikle
– Joseph Marikle, Commented Dec 18, 2011 at 3:08

kubetz · Accepted Answer · 2011-12-18 03:26:45Z

2

Try:

var allAnswered = $('img.joinResponse').filter('[src="url"]').length == 8;

This will get all images with joinResponse class and then return only those that have the src attribute set to url value (replace url with your png url).

I would recommend you insteadto just set another class that will mark correctly answered answers. Then you can just check the number of elements with this class. The advantages are:

Checking if all answers are correct is faster (the selector is faster).
You won't have the URL hardcoded in multiple places so the code is easier to modify. If you have single variable containing this URL and you are using it everywhere, then ignore this :).

edited Dec 18, 2011 at 3:26

answered Dec 18, 2011 at 3:12

kubetz

8,5661 gold badge25 silver badges27 bronze badges

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

3 Comments

kubetz Over a year ago

@GabyakaG.Petrioli You are right - using filter() instead. Thanks!

Gabriele Petrioli Over a year ago

so used in using filter with a function parameter for complex checks that i forgot it actually accepts selectors as parameter.. updating my own as well..

Adam Over a year ago

thankyou so very much... was trying has() but changed to filter().... so much appreciate it... !!!

Gabriele Petrioli · Accepted Answer · 2011-12-18 03:25:17Z

1

You can use

var responses = $('.joinResponse');
if (responses.length === responses.filter('[src$="join_tick.png"]').length)){
  // all are correct
}

This will check if all the .joinResponse elements have an src that ends with join_tick.png

edited Dec 18, 2011 at 3:25

answered Dec 18, 2011 at 3:14

Gabriele Petrioli

197k35 gold badges276 silver badges331 bronze badges

Comments

Etienne Perot · Accepted Answer · 2011-12-18 03:11:36Z

0

Something like this?

var allSet = true;
$('img.joinResponse').each(function() {
    if(!$(this).attr('src')) {
        allSet = false;
    }
});
// allSet now contains whether all images with the class "joinResponse" have an src attribute that is set to a non-empty string

Not the most efficient since it doesn't stop as soon as it finds one such no-src image tag, but if there's only 8 image tags, this should be enough.

answered Dec 18, 2011 at 3:11

Etienne Perot

4,8928 gold badges43 silver badges50 bronze badges

Collectives™ on Stack Overflow

jquery + read multiple img src

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related