$(...).each is not a function

Question

I'm trying to get the text inside all h2 tags on a page, using the web console.

All I've found says to use each, I've tried

var anArray = [];

$('h2').each( function(i,e) {
    anArray.push($(e).innerHTML);
});

But it returns TypeError: $(...).each is not a function.

I've also tried using

$.each('h2', function(i,e) {
        anArray.push($(e).innerHTML);
    });

But again, all I get is TypeError: $.each is not a function?

Solution 1

1) Paste:

var script = document.createElement('script');
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

on your console (includes jQuery)

2) Wait 1 sec and paste:

var h2Arr = [];
$('h2').each( function() {
    h2Arr.push($(this).html());
});

Now, all contents of h2 tags of that page should be stored into h2Arr

Solution 2

if you write code like without $() for example

var1.each(function(){}) //its wrong//each function is not defined error

$(var1).each(function(){}) //its right

Solution 3

Note: For Chrome, do not expect $ is always jQuery.

You can put $ into console to check if it returns default ƒ $(selector, [startNode]) { [Command Line API] }, if yes means $ is not defined for jQuery.

Luckily that we have below ways to try:

1. Solve the conflict of using $, let it be jQuery without any ambiguity

Firstly, you can put this code snippet

var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery-3.3.1.min.js";  /* Include any online jquery library you need */
document.getElementsByTagName('head')[0].appendChild(jq);

into the Console, then put $.noConflict into console, if it not returns undefined, but returns ƒ (t){return e.$===w&&(e.$=Kt),t&&e.jQuery===w&&(e.jQuery=Jt),w}, it means $ is not defined for JQuery now.

Next you can continue to input your regional code, then you will find it works well now.

Refer: https://blog.wplauncher.com/run-jquery-in-chrome-console/

2. Using .js file instead in Chrome, then debug the JavaScript file.

Refer: Chrome DevTools Snippets

3. Besides, for some specific version of Chrome, there is a option in UI to set the page context (probably removed this function in latest version!)

.

Comments

[M. Sa]

I'm still getting $.each is not a function when trying it on a web page.

[bloC]

Ok. So there is a problem with your jQuery. Maybe, as already mentioned in comments, you didn't load jQuery yet. Can you please post all your code?

[Will Sheppard]

For this method of loading JQuery to work, you may need to open up the security of the web page by editing the DOM like this: stackoverflow.com/a/59531227/137948

[gawkface]

can be included in single copy-paste too by adding the "wait" via code like so: setTimeout(() => { <the code in 2nd part> }, 1000);