[jQuery] tricky for loop
[jQuery] tricky for loop
I have an HTML Table:
1: <tbody>
2: <tr id="forum-list-1">
3: <td colspan="4" class="container"><div
class="show_hide">Second text</div></td>
4: </tr>
5: <tr id="forum-list-3">
6: <td>forum1</td>
7: <td>0</td>
8: <td>0</td>
9: <td>na</td>
10: </tr>
11: <tr id="forum-list-4">
12: <td>forum2</td>
13: <td>0</td>
14: <td>0</td>
15: <td>na</td>
16: </tr>
17:
18: <tr id="forum-list-2">
19: <td colspan="4" class="container"><div
class="show_hide">Second</div></td>
20: </tr>
21: <tr id="forum-list-5">
22: <td>forum3</td>
23: <td>0</td>
24: <td>0</td>
25: <td>na</td>
26: </tr>
27: </tbody>
An array store the value 1 and 2:
alert(containers[0]); // 1
alert(containers[1]); // 2
I want to hide all table row (except container rows: forum-list-1 and
forum-list-2). So... I want to hide:
- forum-list-3
- forum-list-4
- forum-list-5
I need to tell Javascript:
"Hey Javascript the number "1" exist in "containers" array, find
"forum-list-1" and hide all table row until forum-list-2".
"Hey Javascript the number "2" exist in "containers" array, find
"forum-list-2" and hide all table row until forum-list-3".
== My JavaScript code: ==
var containerFound = false;
for (var i=0; i<containers.length; i++)
{
$('#forum-list-' + containers[i]).nextAll().each(function()
{
$(this).children().children('.show_hide').each(function()
{
containerFound = true;
});
if (containerFound)
{
return false;
}
$(this).toggle();
});
}
My code work on first container (forum-list-1) but for loop die and
not execute on second container. The second loop not run, to check
#forum-list-2.
Any idea how to solve this problem ?
thanks!