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>要素内に存在します。

次に、サンプルの入力と出力について説明します。

  • valis "jet"の値を指定すると、関数は最後<tr>の文字列 - を持つものを表示しますthejetsons。
  • valis "password"の値を指定すると、関数は 2 つ<tr>の要素を中央に表示します。「password1992」と「adminpassword」を含むもの。

これがあなたの問題に光を当てることを願っています!

于 2012-07-29T16:10:59.407 に答える
0

$("table > tbody > tr:gt(0) > td")tr:gt(0) 内のすべての td を選択します... これは基本的な jquery セレクターです。

これらの td を選択した状態で、関数の戻り値に基づいてフィルターを適用します。true が返された場合、td が選択されます。

次に、関数:に文字列 (val) が含まれているreturn this.innerHTML.toLowerCase().indexOf(val) >=0かどうかを意味し、そうでない場合は true を返します。td

このすべてが等しい

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

このコードは、最初の要素を除くすべての要素tdのすべての要素を選択しtr、各要素の関数をコンテキストとして実行します。要素の関数が false を返す場合、jquery の「配列」から除外され、フィルタリングされたすべての要素の要素を取得trしますそれらが何であるか、それらを示します。関数内で内部テキストを取得し、検索クエリで検索します。

于 2012-07-29T16:13:15.613 に答える