title: jQuery if div display:none then get data-attribute and apply as class
body: <p>I am trying to use jquery to detect screen resize, then if my <code>span</code> is hidden then fire an event to take a <code>data-attribute</code> and apply as a class. </p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;nav class="primary_nav group"&gt;
      &lt;ul class="group smart-nav"&gt;
          &lt;li&gt; &lt;a href="javascript:;" class="screen-clark" data-tip="tooltip" data-class="small"&gt;Clark Kent&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href="javascript:;" class="screen-tony" data-class="medium"&gt;Tony Stark&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href="javascript:;" class="screen-builder" data-class="large"&gt;Bob the Builder&lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div class="secondary_control"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a class="s-icon" title="Poke Bob" href="#"&gt;&lt;span&gt;Poke Bob&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="s-icon" title="Build Ironman" href="#"&gt;&lt;span&gt;Build Ironman&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="s-icon" title="Poke Bob" href="#"&gt;&lt;span&gt;Poke Bob&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.secondary_control ul {
    margin: 0;
    display: table;
    height: 58px;
    position: absolute;
    right: 30px;
    top: 0;
  }
  .secondary_control ul li {
    list-style: none;
    display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
    font-size: 1.2em;
  }
  .secondary_control ul li a {
    padding: 10px 15px;
    background: blue;
    color: #fff;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-radius: 5px 5px 5px 5px;
  }
  
  @media screen and (max-width: 800px) {
  
    .secondary_control
    ul li a span {
      display: none;
    }
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(window).resize(function(){    
  if ($(".secondary_control ul li a span").css("display") == "none" ){
      $('.smart-nav li a').attr('class', $(this).data('tip'));
  }
  });
  </code></pre>
  
  <p><strong>Working Example:</strong>
  <a href="http://jsfiddle.net/d3KQu/4/" rel="nofollow">http://jsfiddle.net/d3KQu/4/</a></p>
  
  <p>Try resizing the window until the media query kicks in. You will notice the span is hidden and the text is removed. However, the data-attribute is not being applied as a class. Can anyone point out whats wrong, or how to improve. Many thanks.</p>
  
  <p><strong>Update</strong>
  Thanks to help from a few people below, i've now got:</p>
  
  <pre><code>onResize = function() {
      if ($(".secondary_control ul li a span").is(":visible")){
          $('.smarter-nav li a').each(function(){ //loop through each
              if ($(this).hasClass("tooltip")){ // check if class is applied
                  $(this).removeClass("tooltip"); //remove as :visible means screen is full width
              }
          });
      }
      else{
          $('.smarter-nav li a').each(function(){ //loop
              $(this).addClass($(this).attr('data-tip')); //add tooltip class
          });
      }
  }//end function
  </code></pre>
  
  <p>Anyone who can improve this, make it more efficient, or correct any mistakes, please let me know. I am keen to learn. I've made it into a function and create and if statement to check if class is applied on resize so i can constantly check if span is:visible and when it's not make sure the class is being applied. When the window is larger, the span is visible and the if statement should remove the class again. </p>