Anzeigen ausblenden mehrere divs auf mehreren Elementen

Question

Ich muss geöffnet arbeiten (1, 2, 3 ...) in Tabellen mit einer Liste von verwandten Aufgaben (1, 2, 3 ...), jeweils in einer Reihe . Die Aufgaben können geöffnet oder geschlossen werden. Ich versuche eine Möglichkeit zu finden, die geschlossenen Aufgaben (Zeilen) für eine bestimmte Arbeit (Tabelle) zu verbergen/anzeigen, indem ich auf ein Element wie die Zeile in der Klasse "showhideforwork-x" klicke.

<table class="work-1"> 
    <tr class="showhideforwork-1"><td>Hide closed tasks</td><tr> 
    <tr><td>Task 1 (opened)</td></tr> 
    <tr class="showhidework-1"><td>Task 2 (closed)</td></tr> 
    <tr class="showhidework-1"><td>Task 3 (closed)</td></tr> 
    <tr><td>Task 4 (opened)</td></tr> 
</table> 

<table class="work-2"> 
    <tr class="showhideforwork-2"><td>Hide closed tasks</td><tr> 
    <tr class="showhidework-2"><td>Task 1 (closed)</td></tr> 
    <tr class="showhidework-2"><td>Task 1 (closed)</td></tr> 
    <tr><td>Task 3 (opened)</td></tr> 
</table> 

<table class="work-n"> 
    <tr class="showhideforwork-3"><td>Hide closed tasks</td><tr> 
    <tr><td>Task 1 (opened)</td></tr> 
    <tr class="showhidework-n"><td>Task 2 (closed)</td></tr> 
    <tr class="showhidework-n"><td>Task 3 (closed)</td></tr> 
</table> 

Ich denke, dass ich es nicht den Klassen den Weg benutzen sollte den Klick auf „showhideforwork-x“ Elemente und hide/show die entsprechenden „showhidework-x“ Reihen zu fangen sein.

Answer 1

Sie sollten eine gemeinsame Klasse zu den geschlossenen Elementen zuordnen, finden Sie alle Elemente mit dieser Klasse innerhalb des übergeordneten und hide/show (Toggle) sie

HTML

<table class="work-1"> 
    <tr class="showhideforwork"><td>Hide closed tasks</td><tr> 
    <tr><td>Task 1 (opened)</td></tr> 
    <tr class="showhidework-closed"><td>Task 2 (closed)</td></tr> 
    <tr class="showhidework-closed"><td>Task 3 (closed)</td></tr> 
    <tr><td>Task 4 (opened)</td></tr> 
</table> 

<table class="work-2"> 
    <tr class="showhideforwork"><td>Hide closed tasks</td><tr> 
    <tr class="showhidework-closed"><td>Task 1 (closed)</td></tr> 
    <tr class="showhidework-closed"><td>Task 1 (closed)</td></tr> 
    <tr><td>Task 3 (opened)</td></tr> 
</table> 

<table class="work-n"> 
    <tr class="showhideforwork"><td>Hide closed tasks</td><tr> 
    <tr><td>Task 1 (opened)</td></tr> 
    <tr class="showhidework-closed"><td>Task 2 (closed)</td></tr> 
    <tr class="showhidework-closed"><td>Task 3 (closed)</td></tr> 
</table> 

jQuery-Code

$(".showhideforwork").click(function() { 
    $(this).parent().find(".showhidework-closed").toggle(); 
}); 

Edit: Fiddle Demo

Answer 2

Ich habe das getan. Ist das was du brauchst?

$(document).ready(function() { 
 
    function checkTasks(){ 
 
    var check = $('tr td'); 
 
    console.log(check[1]); 
 
    $('tr td').each(function(index) { 
 
    //console.log(index + ": " + $(this).text()); 
 
     if($(this).text().indexOf("closed") != -1){ 
 
\t \t \t $(this).parent().hide(); 
 
\t \t } 
 
    }); 
 
    } 
 
    checkTasks(); 
 
    //you can call this function on body load or set 
 
    //time out to check every 5 or 10 minutes 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="work-1"> 
 
    <tr class="showhideforwork-1"><td>Hide closed tasks</td><tr> 
 
    <tr><td>Task 1 (opened)</td></tr> 
 
    <tr class="showhidework-1"><td>Task 2 (closed)</td></tr> 
 
    <tr class="showhidework-1"><td>Task 3 (closed)</td></tr> 
 
    <tr><td>Task 4 (opened)</td></tr> 
 
</table> 
 

 
<table class="work-2"> 
 
    <tr class="showhideforwork-2"><td>Hide closed tasks</td><tr> 
 
    <tr class="showhidework-2"><td>Task 1 (closed)</td></tr> 
 
    <tr class="showhidework-2"><td>Task 1 (closed)</td></tr> 
 
    <tr><td>Task 3 (opened)</td></tr> 
 
</table> 
 

 
<table class="work-n"> 
 
    <tr class="showhideforwork-3"><td>Hide closed tasks</td><tr> 
 
    <tr><td>Task 1 (opened)</td></tr> 
 
    <tr class="showhidework-n"><td>Task 2 (closed)</td></tr> 
 
    <tr class="showhidework-n"><td>Task 3 (closed)</td></tr> 
 
</table>