Check if any element with a certain class is empty

Question

My page contains multiple elements like this:

<span class="field-validation-valid text-danger" data-valmsg-for="CcInfo.CcCheck" data-valmsg-replace="true"></span>
<span class="field-validation-valid text-danger" data-valmsg-for="CcInfo.CcCheck" data-valmsg-replace="true">Something went wrong</span>
<span class="field-validation-valid text-danger" data-valmsg-for="CcInfo.CcCheck" data-valmsg-replace="true"></span>

Now, I'd like to check with JQuery if ANY of these elements contains text. So in this case, it's true, because the second element contains "Something went wrong".

I've tried:

if (!$(".field-validation-valid text-danger").is(':empty')) {
    // do work
}

But apparently it's not that easy.

How to achieve this?

`".field-validation-valid text-danger"` wrong selector, you want: `".field-validation-valid.text-danger"` — A. Wolff, Nov 19 '14 at 10:30

score 3 · Answer 1 · answered Nov 19 '14 at 10:28

You need to check whether there is some content then check, also your selector has a problem it should be .field-validation-valid.text-danger

if (!$(".field-validation-valid.text-danger").html().trim().length) {
    // do work
}

The empty-selector will fail if the checking element has a [space] as its content like <span> </span>

Salman A · Accepted Answer · 2014-11-19T11:02:09.367

3

You can use jQuery.filter() function to filter elements based on custom criteria. The criteria in the below example is that the elements has some non-whitespace text.

$(function() {
  var $notEmptySpans = $(".field-validation-valid.text-danger").filter(function() {
    return $(this).text().match(/\S/) !== null;
  });
  console.log($notEmptySpans);
  if ($notEmptySpans.length > 0) {
    console.log($notEmptySpans.length + " non-empty spans found");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<span class="field-validation-valid text-danger" data-valmsg-for="CcInfo.CcCheck" data-valmsg-replace="true">Something went wrong</span>
<!-- the following are considered empty -->
<span class="field-validation-valid text-danger" data-valmsg-for="CcInfo.CcCheck" data-valmsg-replace="true"></span>
<span class="field-validation-valid text-danger" data-valmsg-for="CcInfo.CcCheck" data-valmsg-replace="true"> </span>

edited Nov 19 '14 at 11:02

answered Nov 19 '14 at 10:31

Salman A

262,204
82
430
521

@Bv202 what code you are using? Check for length or use: `if ($(".field-validation-valid.text-danger").is(':not(:empty)'))` if you find it more readable – A. Wolff Nov 19 '14 at 10:34
This is still not working. Even though one element contains something, it doesn't execute the code. – Bv202 Nov 19 '14 at 10:36
Does it also check on hidden elements? – Bv202 Nov 19 '14 at 10:37
Any element or text node, visible or hidden. The flip side is that whitespace also make the element "not empty". – Salman A Nov 19 '14 at 10:37
Is there a solution for that issue? My element text indeed contains some spaces.. – Bv202 Nov 19 '14 at 10:39
@Bv202 Could you provide sample code which replicates your issue, as a jsfiddle? – A. Wolff Nov 19 '14 at 10:42

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

You could just

if ($(".field-validation-valid.text-danger").not(':empty').length) {
    // do work
}

Explanation of length: Check if element exists in jQuery

Also note you need to list classes separately. Your sample had a space between class names, which caused it to try selecting a tag name <text-danger>

edited May 23 '17 at 12:05

Community

1
1

answered Nov 19 '14 at 10:29

blgt

8,135
1
25
28

Check if any element with a certain class is empty

3 Answers3