title: looping through DOM / mootools sortables
body: <p>I can't seem to get a handle on my list of sortables. They are a list of list elements, each with a </p>
  
  <p>form inside, which I need to get the values from.</p>
  
  <pre><code>Sortables.implement({
      serialize: function(){
          var serial = [];
          this.list.getChildren().each(function(el, i){
              serial[i] = el.getProperty('id');
          }, this);
          return serial;
      }
  });
  
  
  
  var sort = new Sortables('.teams', {
          handle: '.drag-handle',
          clone: true,
          onStart: function(el) {
              el.fade('hide');
          },
          onComplete: function(el) {
              //go go gadget go
              order = this.serialize();
              alert(order);
              for(var i=0; i&lt;order.length;i++) {
                  if (order[i]) {
                      //alert(order[i].substr(5, order[i].length));
                  }
              }
          }
      });
  </code></pre>
  
  <p>the sortables list is then added to a list in a loop with <code>sort.addItems(li);</code> . But when I try to get the sortables outside of the sortables onComplete declaration, js says this.list is undefined.</p>
  
  <hr>
  
  <p><strong>Approaching the problem from another angle:</strong></p>
  
  <p>Trying to loop through the DOM gives me equally bizarre results. Here are the firebug console results for some code:</p>
  
  <pre><code>var a = document.getElementById('teams').childNodes;
  var b = document.getElementById('teams').childNodes.length;
  
  try {
      console.log('myVar: ', a);
      console.log('myVar.length: ', b);
  } catch(e) {
      alert("error logging");
  }
  </code></pre>
  
  <p><strong>Hardcoding one li element into the HTML (rather than being injected via JS) changes length == 1, and allows me to access that single element, leading me to believe that accessing injected elements via the DOM is the problem (for this method)</strong></p>
  
  <p><img src="https://i.imgur.com/bCzmq.png" alt="firebug"></p>
  
  <p>Trying to get the objects with <code>document.getElementById('teams').childNodes[i]</code> returns undefined.</p>
  
  <p>thank you for any help!</p>