Как я могу подсчитать общее количество экземпляров определенного c атрибута данных в моем html?

Question

Например, для следующего HTML ответ будет 4. Поскольку есть 4 экземпляра 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>

В идеале я надеялся на встроенную функцию, такую ​​как "get_total_instances" , но я не нашел ничего подобного.

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

или

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

Answer 1

А для тех, кто не использует jQuery, вот эквивалент ванили JavaScript:

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>

Answer 2

Это свойство length объекта jQuery:

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

Сообщает, сколько элементов в выбранном вами наборе.

Live Пример:

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>