title: jquery- how to define specific variable class for element have multiple classes
body: <p>I have elements and each element have multiple classes, and I want to define each of these classes to use in jquery.. </p>
  
  <p>to explain.. this is the code: <a href="http://jsfiddle.net/wUWYs/2/" rel="nofollow">http://jsfiddle.net/wUWYs/2/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="red row4 col1"&gt;&lt;/div&gt;
  &lt;div class="red row3 col2"&gt;&lt;/div&gt;
  &lt;div class="red row2 col3"&gt;&lt;/div&gt;
  &lt;div class="red row1 col4"&gt;&lt;/div&gt;
  
  &lt;div class="blue row1 col1"&gt;&lt;/div&gt;
  &lt;div class="blue row2 col2"&gt;&lt;/div&gt;
  &lt;div class="blue row3 col3"&gt;&lt;/div&gt;
  &lt;div class="blue row4 col4"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and this is what I tried to do with jquery:</p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(".red").each(function(){
      var colNumber = $(this).attr("class");
      $(this).hover(
          function(){$(".blue."+colNumber).show();},
          function(){$(".blue").hide();}
      );
  });
  </code></pre>
  
  <p>the <strong>main problem</strong> that I want when hover <code>red element</code> who have <code>col1</code> and <code>row4</code> classes, then the two <code>blue elements</code> will shown, who have <code>col1</code> and who have <code>row4</code> ..</p>
  
  <p>problem here:</p>
  
  <pre><code>var colNumber = $(this).attr("class");
  </code></pre>
  
  <p>how can I define the specific class, and how to make the number variable?</p>