isotropic-2022
Share
Blog
Search
Menu

How To Fix jQuery Selector Returning a n.fn.init[0]

By James LePage
|
Last updated on August 5th, 2022
|

jQuery is a popular JavaScript library that was released well before the era of JavaScript frameworks such as React or Vue. In fact, it came out in 2006 which is 7 years before React came out in 2013. Despite its age and the fact that many new projects use newer technologies, much of the web still includes jQuery due to how pervasive it once was. Because of this, even if you are opting for the latest and greatest framework for your new web app, you will likely come across jQuery if you have to maintain any older projects. With this in mind, let’s look at a jQuery issue that you may encounter and how to deal with it. This particular issue involves seeing something like n.fn.init[0] when you use a jQuery selector when you expected to see the selected element itself.

The Problem

There are actually quite a few reasons you may see this unexpectedly. Those reasons boil down to either the document not being loaded completely before trying to select an element or not properly selecting the element in general.

If you see n.fn.init[0] or something similar when you use console.log(), what you are actually seeing is the jQuery function itself. If you see [0] that means the element you tried to select does not exist (yet) in the DOM. If you are seeing a a different index then the element does exist but you are still logging the jQuery function rather than the element itself. Fortunately, there are a few ways to quickly resolve these issues.

The Solution

First and foremost, as a sanity check, it is useful to double check your selectors to ensure they are doing what you want them to. Make sure there are no typos or anything like that so you can narrow down the problem. With that out of the way, you will want to wrap your entire jQuery code inside the library’s provided ready function. This function will make sure that the DOM is actually ready to be manipulated before any of your code attempts to do so. Here is what that looks like:

<script>
  $(document).ready(function () {
    console.log('Hello world!');
  });
</script>Code language: HTML, XML (xml)

Doing this may resolve your issue or at least part of it because the code will definitely only run when you intend it to, and not before. The next step will be to use .get() on your selector to actually get the element you selected from the function returned by the selector. Let’s create an example. The HTML we are using here is simple:

<!DOCTYPE html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<html>
  <div>
    <h1 id="intro">hello world!</h1>
  </div>
</html>Code language: HTML, XML (xml)

Here is the JavaScript:

<script>
  $(document).ready(function () {
    const intro = $('#intro');
    console.log(intro); // ❌ this logs n.fn.init[1]
  });
</script>Code language: HTML, XML (xml)

All we need to do here is replace that selector with the following:

const intro = $("#intro").get();Code language: JavaScript (javascript)

This will now print out the HTML element itself rather than the jQuery function.

Conclusion

There you have it. Hopefully this helps and if it does, please leave some feedback. Otherwise, let us know if you could use some more information on jQuery or any other topics. Thanks for reading!

The Isotropic Codex is a collection of code snippets and education for WordPress, web and WooCommerce developers.
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram