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>元素中，{{1}元素的索引大于0（即 - 跳过第一行。gt()是简单的大于）。 >选择器指出我们只需要第一级子元素中的元素 - 我们不希望比第一组子元素更深入地钻取。
.filter()函数会将匹配元素集合减少为与选择器匹配的元素或传递函数的测试。
这里的条件语句是在每个元素的innerHTML中寻找搜索字符串val的某个索引。
this.innerHTML.toLowerCase().indexOf(val) >=0

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

Phew ......现在，在这之后，我们留下了一些元素列表。符合我们上述所有规格的元素。对于这些元素中的每一个，代码将定位其父级（请记住我们正在讨论<tr>元素，因此他们的父母应该.parent()）并使用.show()函数并在屏幕上显示它们$("table > tbody > tr:gt(0) > td")函数。

对于第一个选择器 - <td>，我发现有时它更容易向后读（在你的脑海中）以理解层次结构......

返回 -

我正在寻找<tr>元素，
位于<tbody>元素内（但不是第一个元素），
位于<table>元素
所有这些都位于val元素内。

现在进行一些示例输入和输出。

鉴于<tr>的值为“jet”，该函数会显示最后一个thejetsons - 带字符串的val。
鉴于<tr>的值为“password”，该函数将在中间显示两个{{1}}元素。包含“password1992”和“adminpassword”的那些。

我希望这可以解释你的问题！

Answer 2

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

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

然后你的函数：return this.innerHTML.toLowerCase().indexOf(val) >=0表示如果td包含字符串（val）将返回true，否则返回true。

所有这些都等于

$("table > tbody > tr:gt(0) > td:contains('"+val+"')").parent().show();

Answer 3

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

在Jquery中查询表

3 个答案: