jquery - prevAll工作，但不是nextAll

问题描述：

我想添加一个搜索功能到我的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的

请提供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/

谢谢修改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(); 


      } 

     } 

    }); 
});

很好，@ learning-j，很高兴你找到了解决方案 – Sico

jquery - prevAll工作，但不是nextAll

相关推荐