Simple jQuery selector only selects first element in Chrome..?

Question

I'm a bit new to jQuery so forgive me for being dense. I want to select all <td> elements on a particular page via Chrome's JS console:

$('td')

Yet when I do this, I get the following output:

<td>Apples</td>

Isn't jQuery supposed to return an array of elements with the <td> tag? Why am I only seeing the first element that matches this criteria?

Here is the site in question: http://www.w3schools.com/html/html_tables.asp

EDIT: I'd like to add that when I type a jQuery function into Chrome console, I do NOT get a jQuery object back. I get a plain HTML element. Something must be wrong with the way my Chrome is set-up/configured.

Answer 1

If jQuery isn't present on the webpage, and of course no other code assigns something to $, Chrome's JS console assigns $ a shortcut to document.querySelector().

You can achieve what you want with $$(), which is assigned by the console a shortcut to document.querySelectorAll().

To know if the page contains jQuery, you can execute jQuery in the console. Note that the Q in command must be in uppercase.

To know if jQuery is assigned to $, you can execute $().jquery which will return jQuery version if that's the case. Note that the q in command must be in lowercase.

Also, there are browser addons to inject jQuery in every webpage.

Answer 2

It seems jQuery is not properly included to run on your target page. I had a similar problem and solved as follows for Google Chrome.

Add a bookmark to your Chrome browser containing the following one-liner code as the URL field (it's beautified for readability):

javascript: (function () {
    var s = document.createElement('script');
    s.setAttribute('src', 'https://code.jquery.com/jquery-latest.min.js');
    if (typeof jQuery == 'undefined') {
        document.getElementsByTagName('head')[0].appendChild(s);
    }
    jQuery("td.edit select option[value=BN]").attr("selected", "");
})();

Then just click that bookmark to run it. It is expected to include jQuery normally and make the console to return something like function (e,t){return new b.fn.init(e,t,r)} as you type in $.

The process of creating the bookmark (also called bookmarklet) is a short-hand for injecting jQuery in every page you wish to work on with the console. However, the snippet code also works if you copy-paste it directly into the JS console.

PS: Credits for the snippet is not mine, since I'm using it for a while and can't remember where I get that from.

Hope it helps.

Answer 3

If jQuery is installed and if the $ symbol is shorthand for jQuery, then $('td') returns a jQuery object. But, in the w3schools page you linked, I don't see that jQuery is even present.

If jQuery was present and the debugger has not overriden the $ symbol, then $('td') would return a jQuery object. The jQuery object is an array-like object (has some properties of an array), but it is not an actual array. If you are looking at things in the console, then you will have to make sure you are looking at the DOM elements themselves, not at the containing jQuery object.

If you want to get an actual array of DOM elements, you can do this:

$('td').get();

which will return an array of DOM elements.

If that doesn't work, then you should examine the timing of your call to $('td').get() to make sure that all td items you want are in the page before you search for them.

Answer 4

Also if you are trying to do something with each of the td's you would need to use a .each() to loop through them. For example:

$('td').each(function() {
   //do something relevant here
});