jQuery .each if/else statement

Question

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

Here is my jQuery - where would I place the .each

$(function() {
    // This will fire when document is ready:
   $('.sub_ttl').click(function ()  {
        // This will fire each time the window is 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 is my 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 only screen and (min-width:980px){
#test {width:300px;}    
#test .test_section .test_section_holder {display:block;}
}
</style>

Any ideas?

Answer 1

I think this is what 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');
}