Fᴀʀʜᴀɴ Aɴᴀᴍ Fᴀʀʜᴀɴ Aɴᴀᴍ - 1 year ago 66
HTML Question

JQuery code selects only one element instead of multiple ones

The problem:

I execute this script on the My Saves page of Google Images but it selects only one element.

According to the JQuery Documentation:

Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the .each() method:

Which means that my code should work on all the elements which have the specified class. But unfortunately, it is carrying out all of the work only on the first element:


I have also tried using explicit iteration with the
method but the browser console throws an error when I use this script:

$('.col-cv-select').each(function (index, element) { element.click(); });

Uncaught TypeError: $(...).each is not a function(…)

I am sure that the page uses JQuery because the first code works quite well, but only selects one element.

Reproducing the problem:

  • I think you need to be logged in to Google before proceeding.

  • Go to Google and search for 'unicorns' (or anything you prefer).

  • Click on the Images tab.

  • Select any image. Click on Save in the Pop-up.

  • Repeat the above step with another image.

  • Next visit the My Saves page.

  • Fire up your browser console and try the codes above.

Test Environment:

  • Opera 37.0.2178.43 - Stable (Since it's based on Chromium, hopefully, using Chrome will yield similar behavior)

  • Windows 8.1 Pro

Hope you can help me out :) Thanks in advance.

Answer Source

Just because the $ variable is defined doesn't mean that jQuery is loaded on the page.

When you run $('.col-cv-select') on that page you're actually running document.querySelector('.col-cv-select') which by design only returns one element.

The reason you're seeing the TypeError about $(...).each not being a function is because the return value of the first function is a DOM node, not a jQuery object.

You can inject the jQuery library into the page by running this code in the developer console: (Taken and adapted from this page)

(function() {
    // more or less stolen form jquery core and adapted by paul irish
    function getScript(url) {
        var script = document.createElement('script');
        script.src = url;
        var head = document.getElementsByTagName('head')[0],
            done = false;
        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function() {
            if (!done && (!this.readyState ||
                    this.readyState == 'loaded' ||
                    this.readyState == 'complete')) {
                done = true;

                script.onload = script.onreadystatechange = null;


Once you execute that code, the $ variable will be aliased to jQuery and you'll be able to use its .each method and everything else that comes with it.

Just remember that once you reload the page the jQuery library will be unloaded, and to load it again you'll need to re-run the code above.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download