SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange loop problem with jQuery

    I have an HTML Table:

    Code:
    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-x".

    == My JavaScript code: ==

    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!

  2. #2
    SitePoint Member
    Join Date
    May 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I understood you are trying to toggle all <tr> that don't contain <div class="show_hide"></div>. Let's assume that I added <button id="button1"></button> to your html code. Now, let's replace your code with:
    Code:
    $('#button1').click(function(){
          $('tr[id^=forum-list]').not(':has(div.show_hide)').toggle();
    });
    I hope that's what your were going to do. I would really recommend that you quit using <table> for that sort of tasks - using <div> is much more flexible and easier to maintain with css and js.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •