jQuery如何统计被隐藏的元素

我创建了一个手动搜索功能，可以在用户输入时显示结果。这里是小提琴：https://jsfiddle.net/rtq4jfuq/1/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>

这里是脚本

$(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"); 
      } 
     }); 
    }); 
});

我想显示一条消息，一旦有没有显示的行，但我怎么检查没有行显示？

来源

2017-08-26 JM Lontoc

已尝试$（element）.is（“：visible”）或$（element）.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"); 
     } 
     } 
    }); 
    }); 
});

编辑

仅供参考 - 你的代码CA大大简化。这是一个快速和肮脏的例子 - 我敢肯定，有进一步改进的余地：

$(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(); 
    } 
    }); 
});

这里的a working fiddle。

来源

2017-08-26 16:38:54

@JM Lontoc，你是否抓住了优化的代码？ –

是的，我修改了一些部分，因为这段代码只是一个例子。谢谢，它现在可行！ –

我会建议你不要添加/删除内联CSS添加/删除一个显示无类的类，所以你可以找到有多少元素有这个类，然后再比较它有多少个单元格，如果数字匹配你就会知道，没有显示任何细胞

来源

2017-08-26 16:37:47 Frankusky

jQuery如何统计被隐藏的元素

回答

相关问题