Question

I am wondering if I could use query and javascript together so I could select an element by class with the javascript and then use javascript to work on that element. Sorry if that didn’t make sense. Here is an example:

$('.nav_flag').src = "images/flags/"+userCountryLower+".gif";

Would that work, if not how do I get an element by class using regular javascript. Thanks!

EDIT:I know JQUERY is JavaScript but I was wondering if I could mix jquery selectors and javascript ‘controller’-for a loss of a better word

Answer 1

To answer your question as asked, there are several ways to take a jQuery object, i.e., what is returned by $('some selector'), and get a reference to the underlying DOM element(s).

You can access the individual DOM elements like array elements:

// update the src of the first matching element:
$(".nav_flag")[0].src = "images/flags/"+userCountryLower+".gif";

// if you're going to access more than one you should cache the jQuery object in
// a variable, not keep selecting the same thing via the $() function:
var navFlgEls = $(".nav_flag");
for (var i = 0; i < navFlgEls.length; i++) { ... }

But you wouldn’t manually loop through the elements when you can use jQuery’s .each() method, noting that within the callback function you provide this will be set to the current DOM element:

$(".nav_flag").each(function() {
    this.src = "images/flags/"+userCountryLower+".gif";
});

However, jQuery provides a way to set attributes with one line of code:

$(".nav_flag").attr("src", "images/flags/"+userCountryLower+".gif");

To answer the second part of your question, doing the same thing without jQuery, you can use .getElementsByClassname() or .querySelectorAll() if you don’t care about supporting older browsers.