title: jquery question - addclass to element depending on active image in rotating banner
body: <p><strong>EDIT : Per Slaks</strong></p>
  
  <pre><code>$j('#banner-content img').each(function() {
      var link = $j('#page-tabs li a.' + $j(this).attr('class'));
  
      if ($j(this).is(':visible')) {
          link.addClass('active');
      } else {
          link.removeClass('active');
      }
  });
  </code></pre>
  
  <hr>
  
  <h2>ORIGINAL POST</h2>
  
  <p>I have a banner that rotates a series of three images.  The active one has a display:block, while the inactive have display:none.  I'm trying to match the class for the active image with an  tag so that I can add an "active" class to the a tag.  Having some trouble writing that function.  It's adding all of the classes for each of the img elements, regardless of whether they're being displayed or not... </p>
  
  <p>The html markup looks like this:</p>
  
  <pre><code>&lt;div id="banner-area"&gt;
      &lt;div class="clearfix" id="promo-boxes-nav"&gt;
          &lt;ul id="banner-tabs"&gt;
              &lt;li&gt;
                  &lt;ul id="page-tabs"&gt;
                      &lt;li&gt;&lt;a class="t39" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="t42" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="t49" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;                            
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="last"&gt;&amp;nbsp;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
      &lt;div id="banner-content"&gt;
           &lt;img class="t39" src="http://localhost:8888/1.png" style="position: absolute; top: 0px; left: 0px; display: none; opacity: 0;"&gt;                                            
           &lt;img class="t42" src="http://localhost:8888/2.png" style="position: absolute; top: 0px; left: 0px; display: block; opacity: 1;"&gt;                                            
           &lt;img class="t49" src="http://localhost:8888/3.png" style="position: absolute; top: 0px; left: 0px; display: none;opacity: 0;"&gt;                                        
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The function in its current form looks like this:</p>
  
  <pre><code>$j('#banner-content img').each(function() {
      if($j(this).css('display','inline')) {
          var bcClass = $j(this).attr('class');
  
          $j('#page-tabs li a').each(function() {
              if($j('#page-tabs li a').hasClass(bcClass)) {
                  $j(this).addClass(bcClass); 
              }
          });
      }
  });
  </code></pre>