Javascript jQuery如何计算隐藏的元素

我创建了一个手动搜索功能，可以根据用户类型显示结果。这是小提琴：

这是HTML

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<input style='width: 300px;' placeholder='search' id='search'>
<table border='1'>
    <tr>
        <th>Name</th>
    </tr>
    <tr class='names'>
        <td>Bob</td>
    </tr>
    <tr class='names'>
        <td>Ted</td>
    </tr>
    <tr class='names'>
        <td>Steve</td>
    </tr>
    <tr class='names'>
        <td>Sven</td>
    </tr>
    <tr class='names'>
        <td>Magnus</td>
    </tr>
</table>

---

我想在没有显示行的情况下显示一条消息，但如何检查是否没有显示行？

我建议您不要添加/删除内联CSS，而是添加/删除一个没有显示的类，这样您就可以找到该类的元素数量，并与您拥有的单元格数量进行比较，如果数字匹配，您将知道没有显示任何单元格

我建议您，不要添加/删除内联CSS，而是添加/删除一个带有display none的类，这样您就可以找到该类中有多少元素，并将其与您有多少单元格进行比较，如果数字匹配，您将知道没有显示任何单元格

使用

：visible

过滤器，以便查看是否隐藏了所有结果：

$(document).ready(function() {
  $("#search").keyup(function() {
    var query = $(this).val();
    $(".names").each(function() {
      var n = $(this).children("td").html();

      if (n.toUpperCase().includes(query.toUpperCase())) {
        $(this).css("display", "");
      } else {
        $(this).css("display", "none");

        // Check to see if all elements have been hidden
        if (!$(".names:visible").length) {
          // All element hidden, do something here
          alert("no results");
        }
      }
    });
  });
});

编辑

仅供参考-您的代码可以大大简化。这是一个又快又脏的例子-我相信还有进一步改进的余地：

$(document).ready(function() {
  $("#search").keyup(function() {
    var query = $(this).val();
    var matches = $(".names").filter(function() {
      return $(this).children("td").html().toUpperCase().includes(query.toUpperCase())
    }).show();

    $(".names").not($(matches)).hide();

    if (!$(".names:visible").length) {
      $("#myTable").append("<tr class='noRecords'><td>No records found</td></tr>");
    } else {
      $(".noRecords").remove();
    }
  });
});

$（文档）.ready（函数（）{
$（“#搜索”）.keyup（函数（）{
var query=$（this.val（）；
var matches=$（“.names”）.filter（函数（）{
返回$（this.children（“td”）.html（）.toUpperCase（）.includes（query.toUpperCase（））
}).show（）；
$（“.names”）.not（$（匹配项））.hide（）；
如果（！$（“.names:可见”）.length）{
$（“#myTable”）.append（“未找到任何记录”）；
}否则{
$（“.noRecords”）.remove（）；
}
});
});

---

下面是。

使用

：visible

过滤器，查看是否隐藏了所有结果：

$(document).ready(function() {
  $("#search").keyup(function() {
    var query = $(this).val();
    $(".names").each(function() {
      var n = $(this).children("td").html();

      if (n.toUpperCase().includes(query.toUpperCase())) {
        $(this).css("display", "");
      } else {
        $(this).css("display", "none");

        // Check to see if all elements have been hidden
        if (!$(".names:visible").length) {
          // All element hidden, do something here
          alert("no results");
        }
      }
    });
  });
});

编辑

仅供参考-您的代码可以大大简化。这是一个又快又脏的例子-我相信还有进一步改进的余地：

$(document).ready(function() {
  $("#search").keyup(function() {
    var query = $(this).val();
    var matches = $(".names").filter(function() {
      return $(this).children("td").html().toUpperCase().includes(query.toUpperCase())
    }).show();

    $(".names").not($(matches)).hide();

    if (!$(".names:visible").length) {
      $("#myTable").append("<tr class='noRecords'><td>No records found</td></tr>");
    } else {
      $(".noRecords").remove();
    }
  });
});

$（文档）.ready（函数（）{
$（“#搜索”）.keyup（函数（）{
var query=$（this.val（）；
var matches=$（“.names”）.filter（函数（）{
返回$（this.children（“td”）.html（）.toUpperCase（）.includes（query.toUpperCase（））
}).show（）；
$（“.names”）.not（$（匹配项））.hide（）；
如果（！$（“.names:可见”）.length）{
$（“#myTable”）.append（“未找到任何记录”）；
}否则{
$（“.noRecords”）.remove（）；
}
});
});

---

这里是。

已经尝试过$（元素）。是（“：可见”）还是$（元素）。css（'display'）==='none'？已经尝试过$（元素）。是（“：可见”）还是$（元素）。css（'display'）=='none'？是的，我修改了一些部分，因为这段代码只是一个示例。谢谢，现在可以用了！是的，我修改了一些部分，因为这段代码只是一个示例。谢谢，现在可以用了！