title: jQuery counting elements by class
body: <p>I have a piece of code where I need to loop through all elements in a table with a specific class name (there will be only one element with this class per table row, a checkbox).  I am using jQuery's <code>$(".className").each( function () { });</code> functionality to do this.  The code works exactly as it should except for one issue.  I have a table with approx 600 rows and each row has a checkbox with the class so there are 600 checkbox elements with this class.  However when I try to loop through all these elements on 180 are found.  I have tried to do a count of these elements with the following code</p>
  
  <pre><code>var count =  $('.importCheck').length;
  console.log("Number of elements = " + count);
  </code></pre>
  
  <p>And it still only fined approx 180 elements.  But if I view the source code of the table in the browser all the 600 rows and elements with the class are present.  Don't understand why this is failing to find all the elements with this class in the grid.
  Any Ideas. </p>
  
  <p>Here is the full method.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>function importCheckedOrders(){
  
  // Display the loader.
  $('#loadingDiv').addClass('cssLoader');
  $('#loadingDivBackground').addClass('cssBackground');
  
  var obj =   {};
  
  var count =  $('.importCheck').length;  // Count how many rows to check as we want to start another process after 
  console.log("Number of elements = " + count);
  
  $("#importChecked").hide();  // Hide the button so the user can't hit it again (cause their still stupid).
  
  
  //  the last one is checked and processed in the .each loop .
  $(".importCheck").each(function(){
  
      if( $(this).prop("checked") ) // If checkbox is checked then add the movement.
      {
          var orderID     =   $(this).val();
  
          // var tempArr =   new Array();
  
          obj[orderID] = {
              orderID:        orderID,         //  ID of resource(or order) being dragged.
              orderDate:      $("#"+orderID+"_order_date").val(),
              orderType:      $("#"+orderID+"_orchid_type").val(),
              accountID:      $("#"+orderID+"_orchid_id").val(),
              currency:       $("#"+orderID+"_order_currency").val(),
              rate:           $("#"+orderID+"_order_rate").val(),
              bookedWith:     $("#"+orderID+"_order_booked").val(),
              ref:            $("#"+orderID+"_order_ref").val(),
              haz:            $("#"+orderID+"_order_haz").val()
          };
  
          $("#"+orderID+"_orderButton").hide();  // Hide the button so the user can't hit it again (cause their stupid).
  
      }
  
      if(!--count)
      { 
          var rootPath    =   $("#rootPath").val();    
  
          // Grab all the data to create a new transaction and post it.
          $.ajax({
              url:    rootPath+"edi/addOrderTicked",
              data:{
                      _token: $('meta[name="_orchid_token"]').attr('content'),
                      orders: JSON.stringify(obj), // stringfy object and pass it to the server for php processing.
                  },
              type:   'post',
              success: function(data){
  
                  $(data).each(function(a, b) {
  
                      $("#order_tr_"+b).hide(); // Hide the row.
                      $('#loadingDiv').removeClass('cssLoader');
                      $('#loadingDivBackground').removeClass('cssBackground');
                      $("#importChecked").show();
  
                  });
  
              }
  
          });             
  
      }        
  
  });       
  
  }
  </code></pre>