$ is not a function - jQuery error

I have the jQuery loaded fine, I've quadruple-checked, though I'm 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> 

11 Answers

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($) { for(var i=0; i <= 20; i++) $("ol li:nth-child(" + i + ")").addClass('olli' + i); }); </script> 

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 ...

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=""></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> 

<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> 

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

import * as $ from "jquery"; 

But this line gives me back an Object $ and it does not allow to use as a function (I can not use $('my-selector')). It solves my problem this lines, I hope it could help anyone else:

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

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

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

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++); }); 

I believe using $ alone is now deprecated in the new version of jQuery. Use below syntax instead:

jQuery(function($) { //magic here }) 

Use jQuery for $. I tried and work.

There are two possible reasons for that error:

1. your jquery script file referencing is not valid

2. try to put your jquery code in document.ready, like this:

   $(document).ready(function(){

   ....your code....

   });

cheers