Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to count every element including the head and body in the document in jQuery?
Overview
To count each and every element in the HTML document including the head tag and body tag can be achieved using the jQuery "length()" method. By selecting the universal selector ( * ) as selector and calculating the length of its using length property will return the number of the elements contained in the HTML document page.
Syntax
The syntax used to count the number of elements is −
$(“*”).property;
selector − The selector used in this is the universal selector, as the name itself describes that it selects each and every element of the page.
property − The selector used in this solution is “length()” property. The length property returns the number of elements present in the document.
Algorithm
Step 1 − Create a simple HTML page, add the jQuery Content Delivery Network (CDN) to the head of the HTML document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
Step 2 − Add a span element in which the output will be displayed.
Step 3 − Use the jQuery syntax to create a click event, and select the button element to trigger the click function.
$('button').click(() => {
})
Step 4 − Now select the universal selector ( * ) as a selector and use the length() property to get the number of elements. Put this inside the text() property as a span element selector. The “text()” property in jQuery is used as innerText() in JavaScript which inserts the text inside the selected element.
$('span').text($('*').length);
Step 5 − When the button is clicked, the action inside the click() event is triggered. Then it will return the number of elements present in the HTML document on the browser screen.
Example
In this example, the HTML page contains certain elements. When the HTML button is clicked the inside selector gets triggered with its property. So in the <span> element the length of the total elements including the head and body will be displayed.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title> Count number of elements including head body jQuery </title>
</head>
<body>
<h2> Total Number of elements = <span> </span> </h2>
<button> Count Elements </button>
<script>
$('button').click(() => {
$('span').text($('*').length);
})
</script>
</body>
</html>
The above example contains certain elements as follows: html, head, script, title, body, h2, span, button, script. So as you can see there are total 9 elements present in the HTML document, so the text() property will set the output in the HTML span element.
Conclusion
So the above solution to count the number of elements is very much helpful in fixing the elements which are not rendered on the page, as we can set a counter for that so after loading the page to the browser if the count is less than the elements then we can check for that and easily fix them out. The length property returns a Number type of value. In many problems the length property is used to achieve the size of the particular element.
774 Views
