jquery - prevAll工作，但不是nextAll

-1

我想添加一個搜索功能到我的HTML頁面下面的js/jquery。基本上，我嘗試搜索失敗/通過/ 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改成這個。注意隱藏和prevAll的變化重新定位......

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


     } 

    } 

}); 
});

和小提琴https://jsfiddle.net/j32k95m7/

來源

2016-06-21 22:00:44 Sico

謝謝修改Sico！您的解決方案打印所有「testTitle」和「testResult」。但我只想爲我正在搜索和匹配的「assertionResult」使用testTitle和testResult。 –

以下解決方案爲我時，我有超過1測試用例通過/失敗結果。

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

回答

相關問題