How to get the number of elements with a non-empty class name

**Rain Lover** · 05-25-2019, 08:35 AM

Sample code:

Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Get elements number</title>
</head>

<body>
  <p class="">Hello, world!</p>
  <p class="5">Hello, world!</p>
  <p class="9">Hello, world!</p>
  <p class="">Hello, world!</p>
  <script>
    console.log(document.querySelectorAll("p[class]").length);
  </script>
</body>

</html>

DEMO

What I get: 4
What I expect: 2

**keyboard** · 05-25-2019, 09:54 AM

Hey Rain Lover.
I saw your SO post, and my personal preference is definitely this solution -

Code:

console.log(document.querySelectorAll("p[class]:not([class=''])").length);

Just adding it in here in case anyone else stumbles into this thread.

**coothead** · 05-25-2019, 10:30 AM

Hi there Rain Lover,

try it like this...

https://jsfiddle.net/nLfeucqh/

...for the empty ones.

coothead

Thread: How to get the number of elements with a non-empty class name

Thread Tools

Search Thread

How to get the number of elements with a non-empty class name

The Following User Says Thank You to keyboard For This Useful Post:

Similar Threads

Disable <a class button if input fields empty

Does the number of php elements on a page affect performance?

Add increment number to class?

Retrieving an Array of All Elements With a Given Class Name and No Value

Get elements by class name

Bookmarks

Bookmarks

Posting Permissions