title: jQuery .each loop one at a time
body: <p>I have an each loop, going through a specific class (.casebox). It checks for additional classes, and changes the title and loads specific content via .load(). </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="mainbody"&gt;
   &lt;div class="halfbox"&gt;
                      &lt;h4 class="box casetitle"&gt;&lt;/h4&gt;
                      &lt;div class="caseloader loader"&gt;&lt;img src="&lt;?php echo $url_resources_images; ?&gt;ajax-loader.gif" alt="Loading..." /&gt;&lt;br /&gt;&lt;p&gt;Please be patient, loading cases...&lt;/p&gt;&lt;/div&gt;
                      &lt;div class="casebox dashbox"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="halfbox"&gt;
                      &lt;h4 class="box casetitle"&gt;&lt;/h4&gt;
                      &lt;div class="caseloader loader"&gt;&lt;img src="&lt;?php echo $url_resources_images; ?&gt;ajax-loader.gif" alt="Loading..." /&gt;&lt;br /&gt;&lt;p&gt;Please be patient, loading cases...&lt;/p&gt;&lt;/div&gt;
                      &lt;div class="casebox dashbox apending"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>function loadCases(){
  $(".casebox").each(function(){
      getURLs();
      boxType();
      console.log('activated');
      div = $(this).parents('div').eq(0);
      div.css('background', 'blue');
  
      //BOXOVERIDE - FOR WHEN THE URL CAN'T BE SET E.G. DASHBOARD
      if($(this).hasClass("allopen")){
          div.find($('.casetitle').text('All Open Cases'));
          caseGET = "&amp;casetype=allopen";
      } else if($(this).hasClass("copen")){
          div.find($('.casetitle').text('My Created Cases (Open)'));
          caseGET = "&amp;casetype=copen";
      } else if($(this).hasClass("aopen")){
          div.find($('.casetitle').text('My Assigned Cases (Open)'));
          caseGET = "&amp;casetype=aopen";
      } else if($(this).hasClass("allclosed")){
          div.find($('.casetitle').text('All Closed Cases'));
          caseGET = "&amp;casetype=allclosed";
      } else if($(this).hasClass("cclosed")){
          div.find($('.casetitle').text('My Created Cases (Closed)'));
          caseGET = "&amp;casetype=cclosed";
      } else if($(this).hasClass("aclosed")){
          div.find($('.casetitle').text('My Assigned Cases (Closed)'));
          caseGET = "&amp;casetype=aclosed";
      } else if($(this).hasClass("apending")){
          div.find($('.casetitle').text('My Assigned Cases (Pending Close)'));
          caseGET = "&amp;casetype=apending";
      }
      console.log(caseGET);
      $(this).load("boxes/cases.php?boxtype=" + boxtype + caseGET + orgGET, function (){
          div.find(".caseloader").hide();
      });
  });
  }
  </code></pre>
  
  <p>However, it seems to run through quickly and when it gets onto the second loop, it appears to override settings made on the 1st run through. The 1st run has no matching result for .hasClass and its title is set by the function getURLS(). Yet when the second loop goes through, it overrides what was set in the 1st box, and puts the title as "My Assigned Cases (Pending Close)" even though it is only the 2nd box which has this class. On top of this, the 1st box loads the correct content, but the loading bar doesn't disappear, but the loading bar on the 2nd box does disappear.</p>
  
  <p>Any ideas on how to ensure it sticks? This probably isnt very clear, but hopefully from the code above, it will help with the explanation. Thanks.</p>