複数の要素に複数のdivを表示する

Question

関連するタスク（1,2,3 ...）のリストを含むテーブルで、開いているワーク（1,2,3 ...）を表示する必要があります。タスクは開いていても閉じていてもかまいません。私は、クラス "showhideforwork-x"の行のような要素をクリックすることで、特定の作業（テーブル）の閉じたタスク（行）を非表示/表示する方法を見つけようとしています。

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

私は「showhideforwork-X」の要素にクリックをキャッチし、表示/非対応「showhidework-X」の行を表示するには、クラスにそれがあるべきように使用しないでくださいと思います。

Answer 1

あなたが親や表示/非表示（トグル）それらを内側にそのクラスを持つすべての要素を見つけ、閉じられた要素に共通のクラスを割り当てる必要があります

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のコード

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

編集： フィドル Demo

Answer 2

私はこれをしました。これはあなたが必要とするものですか？

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