$ is not a function error in Dev tools console

Question

I have the jQuery loaded fine, I've quadruple-checked, though I'm still getting this error in FireBug "$ is not a function" and my code doesn't work.

Here's my code:

<script type="text/javascript">
  $("ol li:nth-child(1)").addClass('olli1');
  $("ol li:nth-child(2)").addClass("olli2");
  $("ol li:nth-child(3)").addClass("olli3");
  $("ol li:nth-child(4)").addClass("olli4");
  $("ol li:nth-child(5)").addClass("olli5");
  $("ol li:nth-child(6)").addClass("olli6");
  $("ol li:nth-child(7)").addClass("olli7");
  $("ol li:nth-child(8)").addClass("olli8");
  $("ol li:nth-child(9)").addClass("olli9");
  $("ol li:nth-child(10)").addClass("olli10");
  $("ol li:nth-child(11)").addClass("olli11");
  $("ol li:nth-child(12)").addClass("olli12");
  $("ol li:nth-child(13)").addClass("olli13");
  $("ol li:nth-child(14)").addClass("olli14");
  $("ol li:nth-child(15)").addClass("olli15");
  $("ol li:nth-child(16)").addClass("olli16");
  $("ol li:nth-child(17)").addClass("olli17");
  $("ol li:nth-child(18)").addClass("olli18");
  $("ol li:nth-child(19)").addClass("olli19");
  $("ol li:nth-child(20)").addClass("olli20"); 
</script>

jQuery is loaded in the header and this script in the footer, so this is not the issue — Alex
– Alex, Commented Oct 14, 2010 at 8:55
OffTopic: Wow! your going to have 20 different classes for a simple list? shouldn't you approach this in other way? — balexandre
– balexandre, Commented Oct 14, 2010 at 8:58
Please post the smallest possible example in jsbin/jsfiddle where the error occurs, so we get even a little chance to help you. Just that short portion of code plus "... so this is not the issue" is the same as asking my crystal ball what the problem is... — Andreas
– Andreas, Commented Oct 14, 2010 at 9:00

Roko C. Buljan · Accepted Answer · 2025-06-06 15:18:13Z

195

In Wordpress jQuery.noConflict() is called on the jQuery file it includes (scroll to the bottom of the file it's including for jQuery to see this), which means $ doesn't work, but jQuery does, so your code should look like this:

<script type="text/javascript">
jQuery(function($) { // DOM is ready, and $ alias is now in scope
  for(let i = 1; i <= 20; i++) {  // loop [1-20]
    $(`ol li:nth-child(${i})`).addClass(`olli${i}`);
  }       
});
</script>

edited Jun 6 at 15:18

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

answered Oct 14, 2010 at 9:09

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Over a year ago

I've replaced my code with this one, but it still doesn't work. This is the page softsailor.com/how-to/…

Nick Craver Over a year ago

@Alex - Taking a look, noConflict is definitely your issue with $...see it in your jQuery include at the end: softsailor.com/wp-includes/js/jquery/jquery.js?ver=1.4.2, seeing what else is wrong now.

Nick Craver Over a year ago

@Alex - You don't have the code in the answer, your code has var i=i for some reason, it should be var i=0, replace that and it'll work.

sairfan Over a year ago

by making $ a function i was able to fix my code var $ = jQuery;

OrangeDog Over a year ago

@sairfan then you'll get conflicts instead

strager · Accepted Answer · 2010-10-14 09:09:07Z

51

It's really hard to tell, but one of the 9001 ads on the page may be clobbering the $ object.

jQuery provides the global jQuery object (which is present on your page). You can do the following to "get" $ back:

jQuery(document).ready(function ($) {
    // Your code here
});

If you think you're having jQuery problems, please use the debug (non-production) versions of the library.

Also, it's probably not best to be editing a live site like that ...

answered Oct 14, 2010 at 9:09

strager

90.3k27 gold badges139 silver badges181 bronze badges

1 Comment

Roko C. Buljan Jun 6 at 15:20

The shorthand for DOM ready in jQuery is: jQuery(function($) { or if you will: jQuery($ => {. While at it, I would also support OP with a cleaner way to write that repetitive code.

Luillyfe · Accepted Answer · 2024-04-06 07:50:22Z

7

In my case I was using jquery on my typescript file:

import * as $ from "jquery";

But that line gives me back an Object: $ and it does not allow to use it as a function (I can not use $('my-selector')). I managed to solve my problem with the lines below. I hope they could help you guys:

import * as JQuery from "jquery";
const $ = JQuery.default;

edited Apr 6, 2024 at 7:50

answered Mar 13, 2018 at 16:00

Luillyfe

6,9828 gold badges39 silver badges51 bronze badges

Comments

Mayank Dudakiya · Accepted Answer · 2019-02-14 13:42:56Z

6

There are quite lots of answer based on situation.

1) Try to replace '$' with "jQuery"

2) Check that code you are executed are always below the main jquery script.

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

});
</script>

3) Pass $ into the function and add "jQuery" as a main function like below.

<script type="text/javascript">
jQuery(document).ready(function($){

});
</script>

answered Feb 14, 2019 at 13:42

Mayank Dudakiya

3,88940 silver badges37 bronze badges

1 Comment

Roko C. Buljan Jun 6 at 15:32

Your first example jQuery(document).ready(function(){ makes no sense. Always pass the well known $ as the first argument in order to alias jQuery and secure it in the scope of the enclosing function. To avoid confusion you can get rid of that first example entirely.

Roshan Padole · Accepted Answer · 2017-07-18 06:08:39Z

<script type="text/javascript">
    $("ol li:nth-child(1)").addClass('olli1');
    $("ol li:nth-child(2)").addClass("olli2");
    $("ol li:nth-child(3)").addClass("olli3");
    $("ol li:nth-child(4)").addClass("olli4");
    $("ol li:nth-child(5)").addClass("olli5");
    $("ol li:nth-child(6)").addClass("olli6");
    $("ol li:nth-child(7)").addClass("olli7");
    $("ol li:nth-child(8)").addClass("olli8");
    $("ol li:nth-child(9)").addClass("olli9");
    $("ol li:nth-child(10)").addClass("olli10");
    $("ol li:nth-child(11)").addClass("olli11");
    $("ol li:nth-child(12)").addClass("olli12");
    $("ol li:nth-child(13)").addClass("olli13");
    $("ol li:nth-child(14)").addClass("olli14");
    $("ol li:nth-child(15)").addClass("olli15");
    $("ol li:nth-child(16)").addClass("olli16");
    $("ol li:nth-child(17)").addClass("olli17");
    $("ol li:nth-child(18)").addClass("olli18");
    $("ol li:nth-child(19)").addClass("olli19");
    $("ol li:nth-child(20)").addClass("olli20"); 
</script>

change this to

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
        $("ol li:nth-child(1)").addClass('olli1');
        $("ol li:nth-child(2)").addClass("olli2");
        $("ol li:nth-child(3)").addClass("olli3");
        $("ol li:nth-child(4)").addClass("olli4");
        $("ol li:nth-child(5)").addClass("olli5");
        $("ol li:nth-child(6)").addClass("olli6");
        $("ol li:nth-child(7)").addClass("olli7");
        $("ol li:nth-child(8)").addClass("olli8");
        $("ol li:nth-child(9)").addClass("olli9");
        $("ol li:nth-child(10)").addClass("olli10");
        $("ol li:nth-child(11)").addClass("olli11");
        $("ol li:nth-child(12)").addClass("olli12");
        $("ol li:nth-child(13)").addClass("olli13");
        $("ol li:nth-child(14)").addClass("olli14");
        $("ol li:nth-child(15)").addClass("olli15");
        $("ol li:nth-child(16)").addClass("olli16");
        $("ol li:nth-child(17)").addClass("olli17");
        $("ol li:nth-child(18)").addClass("olli18");
        $("ol li:nth-child(19)").addClass("olli19");
        $("ol li:nth-child(20)").addClass("olli20"); 
     });
    </script>

Besides the suggestion on using jQuery as the global instance reference name variable, there are cleaner ways to iterate from [1-20]

mkoistinen · Accepted Answer · 2010-10-14 08:53:46Z

4

As RPM1984 refers to, this is mostly likely caused by the fact that your script is loading before jQuery is loaded.

answered Oct 14, 2010 at 8:53

mkoistinen

7,7943 gold badges45 silver badges58 bronze badges

1 Comment

Alex Over a year ago

jQuery is loaded in the header and this script in the footer, so this is not the issue.

Sarfraz · Accepted Answer · 2010-10-14 08:58:51Z

2

That error kicks in when you have forgot to include the jQuery library in your page or there is conflict between libraries - for example you be using any other javascript library on your page.

Take a look at this for more info:

Using jQuery with other libraries

answered Oct 14, 2010 at 8:58

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Comments

Mic · Accepted Answer · 2010-10-14 09:12:20Z

2

When jQuery is not present you get $ is undefined and not your message.

Did you check if you don't have a variable called $ somewhere before your code?
Inspect the value of $ in firebug to see what it is.

Slightly out of the question, but I can't resist to write a shorter code to your class assignment:

    var i = 1;
    $("ol li").each(function(){
        $(this).addClass('olli' + i++);
    });

edited Oct 14, 2010 at 9:12

answered Oct 14, 2010 at 9:04

Mic

25.2k9 gold badges62 silver badges71 bronze badges

Collectives™ on Stack Overflow

$ is not a function error in Dev tools console

8 Answers 8

5 Comments

1 Comment

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

1 Comment

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Linked

Related