jquery - prevAllは動作していますがnextAllはありません

-1

私は、以下のjs/jqueryを使用してHTMLページに検索機能を追加しようとしています。基本的には、失敗/合格/ F/P/FAIL/PASSのフレーズを検索しようとしていますが、検索結果ごとにtestTitle、testAssertion、testResultの各行を印刷します。jquery - prevAllは動作していますがnextAllはありません

$("#search").on("keyup", function() { 
    var value = $(this).val(); 
    $("table tr").each(function(index) { 
     if (index !== 0) { 
      $row = $(this); 
      $(this).hide(); 
      var id = $row.find(".assertionResult").text(); 
      if (id.indexOf(value) === 0) { 
       var x = $row.prevAll().find(".testTitle").last(); 
       var y = $row.nextAll().find(".testResult").first(); 
       console.log(y.parent().html()); 


       $(this).show(); 
       x.parent().show(); 
       y.parent().show(); 


      } 

     } 

    }); 
    });

要素xは表示されますが、要素yは表示されません。どんな助け？

関連するHTMLは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
    <form> 
     <input id="search" placeholder="Search For text..."/> 
     <input id="reset" type="button" value="reset" onclick="testreset()" /> 
    </form> 
<body> 
<table id="table" style="width:80%" align="center" border="4" data-filter="true" data-input="#"> 
      <tr> 
      <td bgcolor="#000000"><font color="#ffffff">Head</font></td> 
      <td class="testTitle" bgcolor="#000000"><font color="#ffffff">HEAD</font></td> 
      <td bgcolor="#000000"></td> 
     </tr> 
     <tr> 
      <td bgcolor="#000000"><font color="#ffffff">TC# 1[Title]</font></td> 
      <td class="testTitle" bgcolor="#000000"><font color="#ffffff">TC#1</font></td> 
      <td bgcolor="#000000"></td> 
     </tr> 
     <tr> 
      <td class="assertionName">TC# 1[A-1]</td> 
      <td class="assertionMessage">TC# 1A-1</td> 
      <td class="assertionResult">P</td> 
     </tr> 
     <tr> 
      <td class="assertionName">TC# 1[A-2]</td> 
      <td class="assertionMessage">TC# 1 A-2</td> 
      <td class="assertionResult">P</td> 
     </tr> 
     <tr> 
      <td class="assertionName">TC# 1[A-3]</td> 
      <td class="assertionMessage">TC# 1 A-3</td> 
      <td class="assertionResult">F</td> 
     </tr> 
     <tr> 
      <td class="testName" bgcolor="#228B22">TC# 1</td> 
      <td class="testResult" bgcolor="#228B22">PASS</td> 
      <td bgcolor="#228B22">P</td> 
     </tr> 
     </table> 

</body> 
</html>

あなたが行を循環している間あなたが隠れているこのHTMLが入力する検索ボックスを持っていると私はJS/jqueryの

出典

2016-06-21 learning J

HTMLを入力してください。 – nicael

私はあなたのコードのロジックを理解していません。 –

検索条件に一致するテキストを持つassertionResultのクラスを持つセルを持つタブローを見つけようとしているようです。これを達成するために、すべての行をループする必要はありません。 –

を使用しているあなたが持っている理由、それはです問題。私はあなたがしようとしているものを達成するためのより簡単な方法があると思いますが、コードをあまり変更しないと、jqueryをこれに変更することができます。 ...

$("#search").on("keyup", function() { 
    var value = $(this).val(); 
    $("table tr").hide(); 
    $("table tr").each(function(index) { 
     if (index !== 0) { 
      $row = $(this); 
      //$(this).hide(); 
      var id = $row.find(".assertionResult").text(); 
      if (id.indexOf(value) === 0) { 
       var x = $(".testTitle"); 
       var y = $(".testResult"); 

       $(this).show(); 
       x.parent().show(); 
       y.parent().show(); 


     } 

    } 

}); 
});

を隠し、prevAllの変更の再配置に注意してください、私は1以上のテストケースがパス/ FAILで結果がある場合、以下の解決策は、私のために働いたhttps://jsfiddle.net/j32k95m7/

出典

2016-06-21 22:00:44 Sico

改造Sicoをありがとう！あなたのソリューションは、すべての "testTitle"と "testResult"を出力します。しかし、私が探している "assertionResult"に対してのみtestTitleとtestResultが必要です。 –

いじります。

$("#search").on("keyup", function() { 
    var value = $(this).val(); 
    $("table tr").hide(); 
    $("table tr").each(function(index) { 
     if (index !== 0) { 
      $row = $(this); 

      var id = $row.find(".assertionResult").text(); 
      if (id.indexOf(value) === 0) { 
       var x = $row.prevAll().find(".testTitle").last(); 
       var y = $row.nextAll().find(".testResult").first(); 
       console.log(y.parent().html()); 


       $(this).show(); 
       x.parent().show(); 
       y.parent().show(); 


      } 

     } 

    }); 
});

出典

2016-06-22 13:38:35

素晴らしい、@ learning-j、あなたが解決策を見つけてうれしい – Sico

jquery - prevAllは動作していますがnextAllはありません

答えて

関連する問題