0

我遇到过这段代码

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

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

4

3 回答 3

3

  • $("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”的那些。

我希望这对您的问题有所帮助！

于 2012-07-29T16:10:59.407 回答
0

$("table > tbody > tr:gt(0) > td")将选择 tr:gt(0) 内的所有 td ...这是一个基本的 jquery 选择器。

选择这些 td 后，根据函数的返回值应用过滤器，如果返回 true，则选择 td。

那么你的函数：return this.innerHTML.toLowerCase().indexOf(val) >=0意味着如果td包含一个字符串（val）将返回true，否则。

这一切都等于

$("table > tbody > tr:gt(0) > td:contains('"+val+"')").parent().show();
于 2012-07-29T16:11:34.563 回答
0

此代码选择除第一个元素之外的所有td元素中的所有tr元素，然后我们为每个元素执行函数作为上下文，如果对于元素，函数返回 false，则将其从 jquery 'array' 中排除，然后对于所有过滤的元素，我们获取tr元素它们是什么并展示它们。在函数中，我们获取内部文本并在搜索查询中搜索它。

于 2012-07-29T16:13:15.613 回答