jquery - prevAll is not nextAll - 우수한 라이브러리

-1

아래의 js/jquery를 사용하여 HTML 페이지에 검색 기능을 추가하려고합니다. 기본적으로 실패/통과/F/P/불합격/통과 구문에 대한 검색을 시도하고 각 결과에 대한 testTitle, testAssertion 및 testResult 행을 인쇄하고 싶습니다.jquery - prevAll is not 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 클래스의 셀이있는 tablerow를 찾으려고하는 것 같습니다. 이를 달성하기 위해 모든 행을 반복 할 필요는 없습니다. –

을 사용하고, 그건 문제. 나는 당신이 시도하고있는 것을 성취하기위한 더 쉬운 방법이 있다고 생각하지만 코드를 너무 많이 변경하지 않고 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의 변화의 재배치를 참고 I 1 개 이상의 테스트 케이스가 통과/실패로 결과가있을 때 아래의 솔루션은 나를 위해 일한 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 is not nextAll

답변

관련 문제