loops - jQuery .each if/else statement -

i have jquery statement want loop through divs class "test_section_holder" , apply if/else statement nearest "sub_ttl" div

here jquery - place .each

$(function() {     // fire when document ready:    $('.sub_ttl').click(function ()  {         // fire each time window resized:         if($(window).width() >= 980) {             // if larger or equal             if( $('#test').hasclass('desktop_refine') && $(".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(); }); 

and here html

<div id="test">     <div class="test_section">         <span class="sub_ttl">sub title 1</span>         <div class="test_section_holder">             section 1         </div>     </div>     <div class="test_section">         <span class="sub_ttl">sub title 2</span>         <div class="test_section_holder">             section 2         </div>     </div> </div> 

and css

<style> #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 screen , (min-width:980px){ #test {width:300px;}     #test .test_section .test_section_holder {display:block;} } </style> 

any ideas?

i think you're after:

if ($('#test').hasclass('desktop_refine') {     $(".test_section_holder").is(":visible").each(function () {         $(this).closest(".test_section").find(".sub_ttl")           .toggleclass("mobileopen")            .removeclass("on");     }); } else {     // if smaller     $('#test').addclass('mobile_refine').removeclass('desktop_refine'); }