7

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?

12
  • 7
    Did you forget to include jQuery?
    – Scimonster
    Mar 11, 2015 at 20:36
  • @Scimonster I tried through JS console in Chrome
    – Hello lad
    Mar 11, 2015 at 20:37
  • 7
    The Chrome JS console includes a $() function by default, but it is not jQuery.
    – JLRishe
    Mar 11, 2015 at 20:37
  • 1
    You need to include jQuery.... developers.google.com/speed/libraries/devguide#jquery Mar 11, 2015 at 20:37
  • 2
    @Hellolad: jQuery is not included for you in the console. $ is defined to be document.getElementById there, by default.
    – Ry-
    Mar 11, 2015 at 20:38

3 Answers 3

24

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.

1
  • 1
    I do have jQuery lib included, just forget to publish it
    – Hello lad
    Mar 11, 2015 at 20:40
5

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

I got an array of children as a result.

1
  • 2
    Then you weren't actually using jQuery at all. Or if you did, you weren't operating on a jQuery wrapped element/collection. The reason it worked as non-function call is that you accessed the vanilla DOM Element.children, instead of jQuery's .children() which is always a function.
    – VLAZ
    Jul 6, 2022 at 10:53
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.