Count Number of Matched Elements in Document with jQuery

Question

I need to count the amount of video thumbnails on a given product page for an ecommerce store, and then output this number on the same page in a particular HTML element.

The desired result is that on the 'Videos' tab there will be the number of videos right next to it. ie Videos 17

I've tried to use .length() and .append() to achieve this but am having dramas. I have about 1.5 days jQuery experience so I know I'm doing something wrong here.

 $document().ready(function(){
        var numvids = $('.videos').length;
        $('.countvids').append("<p>"+numvids+"</p>");
        });

I've set up a JSFiddle

Any help is much appreciated. Thanks!

Answer 1

In Jquery $() is a selector, if you say :

 $(document).ready(function(){

    });

it means that execute the block inside that function when my document is loaded complete on the browser, but what you write :

$document().ready(function(){
...
});

is wrong syntax and is not valid in jquery.

this should work with length :

 $(document).ready(function(){
        var numvids = $('.videos').length;
        $('.countvids').append("<p>"+numvids+"</p>");
        });

or you can use size() :

$(document).ready(function(){
            var numvids = $('.videos').size();
            $('.countvids').append("<p>"+numvids+"</p>");
            });

here is Fiddle DEMO

you code was like this:

$document().ready(function(){
        var numvids = $('.videos').length;
        $('.countvids').append("<p>"+numvids+"</p>");
        });

which is wrong

and also you need to include query script file in your page.

you can include it from online like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

Answer 2

See updated fiddle.

The only error is that you did not include the Jquery link and/or

 $(document).ready(function(){

http://jsfiddle.net/65BrR/4/

Answer 3

$document() is not Correct syntax of jquery , its $(document)

hope so its solve your problem !

$(document).ready(function(){
     var numvids = $('.videos').length;
     alert(numvids );
     $('.countvids').append("<p>"+numvids+"</p>");
});

Answer 4

Your mistake was referencing the a non-existent global function called $document isntead of calling $(document) . As it happens, your code would have worked, as-is, if it had been preceded by this:

var $document = $(document).ready;

But this is purely for amusement and is not very practical or readable code :)

Use the document-ready shortcut syntax

You really want to use the shorter jQuery shortcut. Instead of $(document).ready(function() {YOUR CODE HERE}); use $(function(){YOUR CODE HERE}) ;

eg

$(function(){
     var numvids = $('.videos').length;
     alert(numvids );
     $('.countvids').append("<p>"+numvids+"</p>");
});

This results in shorter code and is becoming so commonplace you might as well get used to it :)