Home > DeveloperSection > Articles > JQuery size method

JQuery size method


JQuery JQuery 
Ratings:
0 Comment(s)
 4156  View(s)
Rate this:

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

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

 

JQuery size method


Don't want to miss updates? Please click the below button!

Follow MindStick