title: jQuery .each if/else statement
body: <p>I have a jQuery statement that I want to loop through all divs with class "test_section_holder" and apply the if/else statement to the nearest "sub_ttl" div</p>
  
  <p>Here is my jQuery - where would I place the .each</p>
  
  <pre><code>$(function() {
      // This will fire when document is ready:
     $('.sub_ttl').click(function ()  {
          // This will fire each time the window is resized:
          if($(window).width() &gt;= 980) {
              // if larger or equal
              if( $('#test').hasClass('desktop_refine') &amp;&amp; $(".test_section_holder").is(":visible"))
                  {
                      $(".test_section_holder").closest(".test_section").find(".sub_ttl").toggleClass("mobileopen").removeClass("on");
                  }
              } else {
                  // if smaller
                  $('#test').addClass('mobile_refine').removeClass('desktop_refine');
          }
      }).resize();
  });
  </code></pre>
  
  <p>And here is my HTML</p>
  
  <pre><code>&lt;div id="test"&gt;
      &lt;div class="test_section"&gt;
          &lt;span class="sub_ttl"&gt;Sub title 1&lt;/span&gt;
          &lt;div class="test_section_holder"&gt;
              Section 1
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="test_section"&gt;
          &lt;span class="sub_ttl"&gt;Sub title 2&lt;/span&gt;
          &lt;div class="test_section_holder"&gt;
              Section 2
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS</p>
  
  <pre><code>&lt;style&gt;
  #test {height:auto; width:100%; overflow:hidden; font-family:arial; text-indent:15px;}
  #test .test_section {height:auto; width:100%; overflow:hidden;}
  #test .test_section .sub_ttl {height:auto; width:100%; background:#000000; color:#ffffff; display:block; padding:15px 0;}
  #test .test_section .test_section_holder {display:none; margin-bottom:20px; margin-top:10px;}
  #test .test_section .sub_ttl.on {background:yellow; color:#000000;}
  
  #test .test_section .sub_ttl.mobileopen {background:red;}
  #test .test_section .sub_ttl.mobileclosed {background:green;}
  #test .test_section .sub_ttl.desktopopen {background:blue;}
  #test .test_section .sub_ttl.desktopclosed {background:pink;}
  
  @media only screen and (min-width:980px){
  #test {width:300px;}    
  #test .test_section .test_section_holder {display:block;}
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Any ideas?</p>