如何计算 html 中特定数据属性的实例总数？

Question

For example, for the following HTML, the answer would be 4. As there are 4 instances of data-example

<h1>Random text</h1>

<div data-example>
  <img src="eg.png">
</div>

<p>More random text</p>

<ul>
  <li data-example>eg1</li>
  <li data-example>eg2</li>
  <li data-example>eg3</li>
</ul>

Ideally, I was hoping for an inbuilt function like "get_total_instances", but i haven't found anything like this.

$('[data-example]').get_total_instances(); // output should be 4

or

get_total_instances('[data-example]'); // output should be 4

Answer 1

It's the length property of the jQuery object:

$("[data-example]").length

It tells you how many elements are in the set that you selected.

Live Example:

 console.log($("[data-example]").length);

 <h1>Random text</h1> <div data-example> <img src="eg.png"> </div> <p>More random text</p> <ul> <li data-example>eg1</li> <li data-example>eg2</li> <li data-example>eg3</li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

And for those who are not using jQuery, here's the vanilla JavaScript equivalent:

document.querySelectorAll("[data-example]").length;

 console.log(document.querySelectorAll("[data-example]").length);

 <h1>Random text</h1> <div data-example> <img src="eg.png"> </div> <p>More random text</p> <ul> <li data-example>eg1</li> <li data-example>eg2</li> <li data-example>eg3</li> </ul>