Question

我的页面包含多个这样的元素：

<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>

现在，我想用JQuery查看这些元素中是否包含任何文本。所以在这种情况下，这是真的，因为第二个元素包含“出错了”。

我试过了：

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

但显然这并不容易。

如何实现这一目标？

Answer 1

您可以使用jQuery.filter()功能根据自定义条件过滤元素。以下示例中的标准是元素具有一些非空白文本。

$(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>

Answer 2

您需要检查是否有某些内容然后检查，您的选择器也有问题.field-validation-valid.text-danger

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

如果检查元素的内容为[space]

，则empty-selector将失败

Answer 3

你可以

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

length的解释：Check if element exists in jQuery

另请注意，您需要单独列出类。您的示例在类名之间有一个空格，这导致它尝试选择标记名<text-danger>

检查具有某个类的任何元素是否为空

3 个答案: