CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
Fᴀʀʜᴀɴ Aɴᴀᴍ
Fᴀʀʜᴀɴ Aɴᴀᴍ

Reputation: 6251

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:

$('.col-cv-select').click();

I have also tried using explicit iteration with the .each() 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:

Test Environment:

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

Upvotes: 2

Views: 178

Answers (2)

Rabih El Khatib
Rabih El Khatib

Reputation: 61

You need to import jquery into your chrome browser before testing

use the following block of code, before calling your test code

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();

Upvotes: 0

Andy
Andy

Reputation: 5091

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;
                head.removeChild(script);
            }
        };
        head.appendChild(script);
    }

    getScript('https://code.jquery.com/jquery.min.js');
})();

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.

Upvotes: 4

Related Questions