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