如果 jQuery 过滤方法找不到结果，如何显示警报

Question

我有一个 jQuery 问题，如果无法使用过滤器方法找到结果，则显示警报。我的代码在这里：

$('#search_icon').click(function(){
        var sSearch = $('#search').val().toLowerCase();

        $("#results #card").filter(function(){ 
            
            $(this).toggle($(this).text().toLowerCase().indexOf(sSearch) > -1)

       });
        

});

#search 是用于搜索的文本输入字段。上面的代码可以显示 html 元素包含在 #search 中搜索的值。谢谢。

Answer 1

您正在尝试对某些

filter

调用

$("#results #card")

函数，该函数预计仅返回一个元素，因为 id 无法重复。

因此，您可以使用类

card

和选择器

.card

，而不是通过 id 选择卡片。

这是一个工作演示：

$('#search_icon').click(function() {
  var sSearch = $('#search').val().toLowerCase();

  $("#results .card").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(sSearch) > -1)
  });
});

#results{
  margin-top: 1em;
  display: flex;
  gap: 1em;
}

.card{
  border: solid 1px;
  width: fit-content;
  padding: 1em;
}

button{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<input id="search" type="text">
<button id="search_icon">search</button>

<div id="results">
  <div class="card">a</div>
  <div class="card">b</div>
  <div class="card">c</div>
  <div class="card">d</div>
  <div class="card">e</div>
</div>