---
title: "JQuery size method"  
description: "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"  
author: "Sachindra Singh"  
published: 2011-02-22  
updated: 2020-03-04  
canonical: https://www.mindstick.com/articles/464/jquery-size-method  
category: "jquery"  
tags: ["jquery"]  
reading_time: 1 minute  

---

# JQuery size method

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](https://www.mindstick.com/mindstickarticle/15efbd16-6598-48c9-bf42-95195278b6d7/images/c6c85d5e-5259-450b-942a-4fa98a50300e.png)

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

![JQuery size method](https://www.mindstick.com/mindstickarticle/15efbd16-6598-48c9-bf42-95195278b6d7/images/c9ccbf5f-c941-4ec7-ad99-146526bb4217.png)

\

---

Original Source: https://www.mindstick.com/articles/464/jquery-size-method

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
