SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Location
    Surrey, UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Advice for traversing in jQuery

    Hi,

    I have a table like this:

    HTML Code:
    <table class="shoplist">
     <tr>
      <td>name</td><td><a href="#">Info</a></td>
     </tr>
     <tr class="details"><td colspan="2"><div>details</div></td>
     </tr>
    ...
    </table>
    and the following script:

    HTML Code:
    $(function() {
     $('.shoplist a').click(function() {
      $(this).parent().parent().next('.details').children('td').children('div').slideToggle(600);
      return false;
     });
    });
    The above works but seems overly complicated. Can anyone suggest a better way to do it?

    Thanks,
    Martin.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems quite easy... not too many code
    Maybe try without a table and with <li> lists instead ?

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Location
    Surrey, UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, well this is a simplified version of the table. There's actually two more columns and I thought about doing it as a list but a table really is the best option.
    Martin.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't have a clue to get this more simplified, as I'm not so experienced in jquery etc...
    But, maybe you could do this with some sorth of array and a for loop, running through your links, giving them a function.

    HTML Code:
    <table id="shoplist">
     <tr>
      <td>name</td><td><a href="#">Info</a></td>
     </tr>
     <tr class="details"><td colspan="2"><div>details</div></td>
     </tr>
    ...
    </table>
    
    // JS: 
    links = document.getElementById('shoplist').getElementsByTagName('a');
    divs = document.getElementById('shoplist').getElementsByTagName('div');
    
    for (var i=0; i < links.length; i++) {
    links[i].onclick = divs[i].doSlideToggleFunction();
    }
    // ..... needs to be worked out some more
    At the end, my solution will be more complicated I guess

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Have you read the tree traversal documentation?

    Code javascript:
    $(this).parent('tr').next('.details').children('div').slideToggle('slow');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Location
    Surrey, UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A pure Javascript solution would work but defeats the point of using jQuery really, but thanks for the suggestion.

    Paul - yes I've tried a few of them but without much luck. If I modify your suggestion to use closest instead of parent it nearly works but I still need another .children('td'):

    Code JavaScript:
    $(this).closest('tr').next('.details').children('td').children('div').slideToggle('slow');

    It's one less selector at least but still seems like too many. But it works so it's not critical, I just figured there must be a more efficient way.
    Martin.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Oh yes, I should have seen it before.

    Use a context selector, so that you select the div that is within the the context of the next details element.

    Code javascript:
    $('div', $(this).closest('tr').next('.details')).slideToggle('slow');

    So, starting from that details element, you find the selector, and then slide the result.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Location
    Surrey, UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, excellent, that works. I didn't know about about context selectors so I've learnt something today. Thanks Paul!
    Martin.


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
  •