jquery - prevAll funktioniert, aber nicht nextAll

-1

Ich versuche, eine Suchfunktionalität zu meiner HTML-Seite mit der folgenden js/jquery hinzufügen. Im Grunde versuche ich nach failed/passed/F/P/FAIL/PASS zu suchen und ich möchte print testTitle, testAssertion und testResult Zeilen für jedes für das Suchergebnis ausgeben.jquery - prevAll funktioniert, aber nicht 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(); 


      } 

     } 

    }); 
    });

Element x wird angezeigt, aber nicht Element y. Irgendeine Hilfe?

Assoziierte HTML ist:

<!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>

Diese HTML hat ein Suchfeld einzutippen, und ich habe verwendet js/jquery

Quelle

2016-06-21 learning J

Bitte HTML angeben. – nicael

Ich verstehe die Logik Ihres Codes nicht. –

Es scheint so, als ob Sie versuchen, nach Tabellen zu suchen, die eine Zelle mit einer Klasse von assertionResult enthalten, deren Text den Suchkriterien entspricht. Sie müssen nicht jede Zeile durchlaufen, um dies zu erreichen. –

Sie versteckt werden, während Sie durch die Reihen sind Radfahren, das ist, warum Sie haben Probleme. Ich denke, es gibt einfachere Möglichkeiten, um das zu erreichen, was Sie versuchen, aber ohne Ihren Code zu sehr zu ändern, können Sie möglicherweise die jquery dazu ändern. Beachten Sie die Neupositionierung der Haut und Änderung des 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(); 


     } 

    } 

}); 
});

und Geige https://jsfiddle.net/j32k95m7/

Quelle

2016-06-21 22:00:44 Sico

Vielen Dank für die Änderung Sico! Ihre Lösung druckt alle "testTitle" und "testResult". Aber ich will testTitle und testResult nur für das "assertionResult", nach dem ich suche und übereinstimme. –

Die folgende Lösung für mich gearbeitet, wenn ich mehr als 1 Testfall mit Pass/Fail-Ergebnisse haben.

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


      } 

     } 

    }); 
});

Quelle

2016-06-22 13:38:35

Großartig, @ Learning-j, froh, dass Sie eine Lösung gefunden haben – Sico

jquery - prevAll funktioniert, aber nicht nextAll

Antwort

Verwandte Themen