title: jquery/jquery ui: find each span add class to single span being dragged
body: <p>I'm trying to make it so only the span that is being dragged has a class added, so far I have this but but it adds the class to all span's ...</p>
  
  <pre><code>$(function() {
  
   $('span').draggable();
  
    $('#container, #board').droppable({
      tolerance : 'touch',
           over : function() {
  
      $('li').each(function() {
       $(this).find('span').addClass('over');
      });             
  
  },
      drop : function() {
      $('li').each(function() {
       $(this).find('span').removeClass('over');          
  }); 
  
        }
     });
  });
  </code></pre>
  
  <p>Here's the he HTML (if that helps)</p>
  
  <pre><code>&lt;div id="container"&gt;
   &lt;div id="board"&gt;
    &lt;ul&gt;
     &lt;li class="foo1"&gt;&lt;span class="p1"&gt;&lt;/span&gt;&lt;/li&gt;
     &lt;li class="foo2"&gt;&lt;span class="p1"&gt;&lt;/span&gt;&lt;/li&gt;
     &lt;li class="foo1"&gt;&lt;span class="p1"&gt;&lt;/span&gt;&lt;/li&gt;
     &lt;li class="foo2"&gt;&lt;span class="p1"&gt;&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>