SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery - cloning A-Z list

    Hi I have some 'jquery' which I use to create a sortable table of web pages. Users can filter this table with an A-Z list shown before and after the table.

    I can clone the '$filters' object (with the A-Z list) so it appears at the before/after the table.

    However when a user selects a letter on the either list (which becomes active and bold) this isn't reflected on the other list, which is bad for usability.

    When a letter is selected I want it to be active in both lists, any idea how to do this?

    Thanks
    Steven

    Code:
    /***************************************
       =FILTERING
    -------------------------------------- */
    
    $(document).ready(function() {
      $('table.filterable').each(function() {
        var $table = $(this);
    
        $table.find('th').each(function (column) {
          if ($(this).is('.filter-column')) {
    		  
    		  
            var $filters = $('<ul class="filters atozlist"></ul>');
            //var keywords = {};
    
            //$table.find('tbody tr td').filter(':nth-child(' + (column + 1) + ')').each(function() {
            //  keywords[$(this).text()] = $(this).text();
            // });
           
            $('<li class="filter"><a href="#a-z-table">Show all pages</a></li>').click(function() {
              $table.find('tbody tr').removeClass('filtered').not('.collapsed').show();
              $(this).addClass('active').siblings().removeClass('active');
              $table.trigger('stripe');
            }).addClass('clickable active').appendTo($filters);
    
            var keywords = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ];
    		
    		
    		$.each(keywords, function(index, keyword) {
              
    		  $('<li class="filter"></li>').html('<a href="#a-z-table">' + keyword + '</a>').bind('click', {'keyword': keyword}, function(event) {
                $table.find('tbody tr').each(function() {
                  
    			  if ($('td', this).filter(':nth-child(' + (column + 1) + ')').text().charAt(0) == event.data['keyword']) {
                    $(this).removeClass('filtered').not('.collapsed').show();
    				
    								
                  }
                  else if ($('th',this).length == 0) {
                    $(this).addClass('filtered').hide();
                  }
                });
    
                $(this).addClass('active').siblings().removeClass('active');
                $table.trigger('stripe');
              }).addClass('clickable').appendTo($filters);
    
            });
    		
    		
    		
    		
    		$filters.insertBefore($table);
    		
    		$filters.clone(true).insertAfter($table);
    		
          }
        });
      });
    });

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The this keyword will always point to a single element. It can't point to multiple elements just because you may have cloned them. Instead of using the this keyword to locate the set of dom elements you want to add/remove classes from, you should go up the dom hierarchy a bit so you can find both sets. For example, search by classname.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the useful advice, I thought it might be something like that - any example of how this would work?

    Thanks
    Steven


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
  •