javascript - 在 Jquery 中查询表

Question

我遇到过这段代码

$("#search").keyup(function(){
  var val = $.trim(this.value).toLowerCase();
   $("table > tbody > tr:gt(0) ").hide();

   if(val.length){
     $("table > tbody > tr:gt(0) > td").filter(function(){
       return this.innerHTML.toLowerCase().indexOf(val) >=0;
     }).parent().show();
   } else $("table > tbody > tr:gt(0)").show();
});

用于在 jQuery 中查询表。这是 HTML 标记

<p>
  <input id = "search" type = "text">
</p>
<table id ="accounts">
  <tr>
    <th>Username</th>
    <th>Password</th>
  </tr>         
  <tr>
    <td>Metasm</td>
    <td>password1992</td>
  </tr>
  <tr>
    <td>superadmin</td>
    <td>adminpassword</td>
  </tr>         
  <tr>
    td>skyrocketeer</td>
    <td>thejetsons</td>
  </tr>
</table>

基本上可以用了。但我对 jQuery 代码感到非常困惑。

我的问题:在这部分代码中

$("table > tbody > tr:gt(0) > td").filter(function(){
  return this.innerHTML.toLowerCase().indexOf(val) >=0;
}).parent().show();

这部分具体是做什么的？它返回什么？

Answer 1

• $("table > tbody > tr:gt(0) > td") - 这行代码表明您想要所有 <td> <table> 中的元素<tbody> 中的元素元素，谁是<tr>元素的索引大于 0 (即 - 跳过第一行。 gt() 是简单的大于)。 >选择器声明我们只需要第一级子元素中的元素 - 我们不想比第一组子元素进一步深入。

• .filter() 函数会将匹配元素的集合减少到与选择器匹配或通过函数测试的元素。

• 这里的条件语句是寻找搜索字符串val的某个索引。 ，在每个元素的innerHTML内。
  this.innerHTML.toLowerCase().indexOf(val) >=0

所以这意味着(记住我们正在迭代从第一个选择器中找到的所有元素)我们正在寻找字符串 val 的出现。 innerHTML内的元素。 innerHTML 也通过 toLowerCase() 传递函数，顾名思义就是函数 - 将所有字符转换为其小写形式。

唷...现在，在这一切之后，我们剩下了一个特定的元素列表。满足我们上述所有规范的元素。对于每个元素，代码将使用 <td> 找到它们的父元素(记住我们正在讨论 <tr> 元素，因此它们的父元素应该是 .parent() )。函数并将它们显示在屏幕上 .show()功能。

<小时/>

对于第一个选择器 - $("table > tbody > tr:gt(0) > td") ，我发现有时(在你的脑海中)向后阅读它更容易理解层次结构......

返回 -

1. 我正在寻找<td>元素，
2. 里面的 <tr>元素(但不是第一个)，
3. 位于 <tbody> 内元素
4. 所有内容都位于 <table> 内元素。

<小时/>

现在我们来看一些示例输入和输出。

• 给定 val 的值是“jet”，该函数将显示最后一个<tr> - 带有字符串的 - thejetsons .
• 给定 val 的值是“密码”，函数会显示两个<tr>中间的元素。包含“password1992”和“adminpassword”的密码。

<小时/>

我希望这能帮助您解决问题!