'Error "TypeError: $(...).children is not a function"

I try to select a certain DOM element with jQuery.

The HTML content:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
    </head>
    <body>
      <nav id="nav" class="navigator">
      <h1>Nav Header</h1>

      <ul class="nav-list">
        <li class="nav-item"><a >Item #1</a></li>
        <li class="nav-item active"><a href="#2">Item #2</a></li>
      </ul>
      </nav>
    </body>
</html>

I want to select Item #1. I used

$('.nav-list').children()

I got

TypeError: $(...).children is not a function

What's wrong here?



Solution 1:[1]

You need to include jQuery in your page.

Most browsers nowadays include a $() function in their console by default for easy element selection, but this simply maps to document.getElementById().

The value returned will not have a .children() method.

Additionally, if you load an HTML page directly from your file system, you need to include the http:// for CDN script URLs. Otherwise, your browser will try to find the .js file on your local system.

Solution 2:[2]

Going from the fact that $ doesn't refer to jQuery in the browser's console I found a way to change this for the current session within Google Chrome. I just pasted the JavaScript source from this github page into the console:

use jQuery in Chrome javascript console

The code for future reference:

var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();

After that I could

$("html").children()

Solution 3:[3]

In my case the problem was fixed by replacing '.children()' with 'children'.

I got an array of children as a result.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Peter Mortensen