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?

Answer 1

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:

1. Checking if all answers are correct is faster (the selector is faster).
2. 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 :).