JQuery size () method is used to count DOM element’s by specifying matched elements. In this demo I am try to show you, how we can count specified DOM element s on the matched condition. In this demo multiple <option> element is define in <select> element and I want to count <option> element as a total number of cities.

Syntax :$( “document”).size ();

Code:
<title>JQuery size method</title>
 
    <script type="text/javascript" src="jquery.min.js    </script>
 
    <script type="text/javascript">
        var x;
        $(document).ready(function()        {
            $("button").click(function
            {
                x = $("option").size();//size function will count <option> element that contained cities name where x variable will store size of <option> element that define in <select> element
                alert('Total Cities...' + x.toString());//this line will show total number of cities
            });
 
        });
    </script>
 
</head>
<body>
    <h2>
        JQuery size method</h2>
    <table width="200">
    <tr>
    <td align="center">
    City List
    </td>
    </tr>
        <tr>
            <td>
                <select>
                    <option>Allahabad</option>
                    <option>Varanasi</option>
                    <option>Lucknow</option>
                    <option>Kanpur</option>
                    <option>Fridabad</option>
                    <option>Mumbai</option>
                    <option>Chandigarh</option>
                </select>
            </td>
            <td>
                <button>
                    Total Cities</button>
            </td>
        </tr>
    </table>
</body>
Screenshot

JQuery size method

If I will click on button we will get total number of cities as shown below:

 

JQuery size method


  Modified On Nov-18-2017 02:45:43 PM

Leave Comment