title: JQuery Modify Element's Style By Title
body: <p>With this html:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="inner"&gt;
          &lt;span class="selection" title="Green"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="inner"&gt;
          &lt;span class="selection" title="Yellow"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="inner"&gt;
          &lt;span class="selection" title="Red"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this existing jQuery which can be changed as necessary:</p>
  
  <pre><code>$(document).ready(function(){
      $('.outer .inner span.selection').each(function(){
          if($(this).attr('title', 'Green')) {
              $(this).parent().css('background-color', 'green');
          }
          if($(this).attr('title', 'Yellow')) {
              $(this).parent().css('background-color', 'yellow');
          }
          if($(this).attr('title', 'Red')) {
              $(this).parent().css('background-color', 'red');
          }
      });
  });
  </code></pre>
  
  <p>Essentially this only displays a single item in a dropdown. I'm looking to change the list item displayed as a single color. Other list items that aren't selected are hidden.</p>