Boolean question

Question

So, I'm working on teaching myself jQuery with the help of some books, and I'm currently stumped by a seemingly simple problem. Why does the value of $('div.foo').length evaluate to 0? A div element exists in the page, so why doesn't the $('div.foo').length evaluate to 1?

<!DOCTYPE html>
<html>
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            document.write($(div.foo).length);
            </script>
    <body>
            <div class="foo"></div>
    </body>
</html>

Yi Jiang · Accepted Answer · 2011-03-08 10:56:23Z

2

 document.write($(div.foo).length)

should be

 document.write($("div.foo").length);

And also, your scipt will be run before the DOM is loaded, so try encapsulating the JavaScript in jQuery's $(document).ready - see http://docs.jquery.com/Tutorials%3AIntroducing_%24(document).ready()

edited Mar 8, 2011 at 10:56

Yi Jiang

50.2k16 gold badges139 silver badges137 bronze badges

answered Mar 8, 2011 at 6:03

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahesh Velaga · Accepted Answer · 2011-03-08 06:07:55Z

1

You are missing the quotes

document.write($("div.foo").length);

Edit:

Brad makes a good point. You should wrap this call in document.ready

$(document).ready(function() { 
    document.write($("div.foo").length);
});

edited Mar 8, 2011 at 6:07

answered Mar 8, 2011 at 6:02

Mahesh Velaga

22k5 gold badges41 silver badges60 bronze badges

2 Comments

Brad Christie Over a year ago

Though you're right about quotes, the DOM isn't fully loaded yet. It still won't see the element.

Mahesh Velaga Over a year ago

@Brad: Edited to add more info. Thanks

Brad Christie · Accepted Answer · 2011-03-08 06:03:48Z

Simple: the DOM isn't loaded yet.

You have two options:

place the code just before the </body> tag so the document elements have been loaded and, thus, jQuery has visibility of the object.
Use $(document).ready(function(){ ...code... }) (or short-hand $(function(){ ...code... }) so the code within the braces only executes after the document is loaded.

Try these two on for size:

re-ordering executon:

<html>
  <head>
    <script src="jquery.js"></script>
  </head>
  <body>
    <div class="foo">
    <script>
      alert($('.foo').length);
    </script>
  </body>
</html>

wait for loaded DOM*

<html>
  <head>
    <script src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        alert($('.foo').length);
      });
    </script>
  </head>
  <body>
    <div class="foo">
  </body>
</html>

Praveen Prasad · Accepted Answer · 2011-03-08 06:22:38Z

0

you have to move this code after dom elements are created, by moving it at bottom before body tag. Currently you are try to access elements even before they are created in DOM.

   <script type="text/javascript">
        document.write($('div.foo').length);
   </script>

or

Run your code after DOM is ready i.e. all elements are created in DOM.

//this piece of code can be placed even before elements are created
    $(function(){
    //this code here, will run after DOM is ready
    });

edited Mar 8, 2011 at 6:22

answered Mar 8, 2011 at 6:06

Praveen Prasad

32.2k20 gold badges77 silver badges106 bronze badges

Comments

Manish Singh · Accepted Answer · 2011-03-08 06:23:46Z

0

DOM is not loaded. Use

    $(document).ready(function() {
          alert($('div.foo').length); 
    });

answered Mar 8, 2011 at 6:23

Manish Singh

6,2465 gold badges47 silver badges31 bronze badges

Collectives™ on Stack Overflow

Boolean question

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related