JavaScript

Counting elements efficiently with jQuery: How to use the size() method and examples

 

In the world of web development, it’s often necessary to determine how many specific elements exist on a page. For instance, when users dynamically add content or when you want to style specific types of elements uniformly. Here, we will introduce the jQuery size() function, explaining its usage and providing examples.

The size() method allows you to count how many specified tag elements exist on a page. Let’s count and display how many div tags are present on a page.

Contents
  1. What is jQuery?
  2. The basics of the size() function
  3. Let’s count the number of div tags on a webpage
  4. [size] A demo page for counting the number of specified tag elements (div tags)
  5. Conclusion

What is jQuery?

jQuery is a lightweight and powerful JavaScript library developed by John Resig in 2006. It is designed to simplify tasks such as HTML manipulation, event handling, animations, and Ajax with concise syntax. Loved by web developers worldwide, this library significantly improves web development efficiency.

The basics of the size() function

The size() function returns the number of elements contained in a jQuery object. Using this function, you can easily retrieve the number of DOM elements that match a given selector. However, size() has been deprecated as of jQuery 3.0, and the .length property is now recommended. In this article, we’ll explain both the usage of size() and the currently recommended .length property.

Let’s count the number of div tags on a webpage

CSS Setup

To improve the appearance of the webpage, we prepare the following CSS. Here, we set a background color for div tags and center them.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:30px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 0 0;
  position: relative;
}
div{
  width: 400px;
  margin: 0 auto;
  background-color: #000000;
  font-size: 20px;
  font-weight: bold;
  line-height: 2em;
  color: #ffffff;
  margin-bottom: 6px;
}
span{
  font-size:30px;
  font-weight: bold;
}
</style>

HTML Preparation

First, create a simple HTML page containing the elements you want to count. In the example below, there are three div tags, and we’ll count them.

<h1>The number of div tags below will be displayed in the span tag at the bottom.</h1>
<br>
<br>

<div>div tag 1</div>
<div>div tag 2</div>
<div>div tag 3</div>

<br>
<br>
<span></span>

Using the size() function in JavaScript

Load the jquery-2.2.0.min.js file. Finally, write JavaScript to count the number of div tags on the page using the size() function (or .length) and display the result in the span tag.

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  var cnt = $("div").size();
  $("span").text("There are " + cnt + " div tags.");
});
</script>

This code executes after the page is loaded, counts the div tags, and displays the result on the page.

[size] A demo page for counting the number of specified tag elements (div tags)

With this, you have the basic demo page ready. Through this simple example, you should have understood how to use jQuery’s size() function (and the .length property) to count specific HTML elements. Try writing the code yourself to experience the convenience of jQuery and the power of manipulating webpage elements.

[size] Demo for counting the number of specified tag elements (div tags)

Conclusion

jQuery’s size() function is a convenient feature to easily determine the number of elements on a page that match certain conditions. However, the .length property is now recommended. Through this article, you have acquired basic DOM manipulation techniques using jQuery. In the world of web development, small techniques like these often play a significant role. Use this knowledge to create more engaging web pages.

※ If you reuse the code, please do so at your own risk. Do not reuse the Google Analytics tag in the demo page’s head tag.

size()
RELATED POST