title: Use JQuery to wrap multiple sets of elements in a Div
body: <p>I'm working on a dropdown menu and need to mutate the existing html markup with JQuery to make it fit the design.</p>
  
  <p>Here is a simplified example:
  Wrap all "ul's" that contain more than one "li" in a div (in the same div, NOT one div for each UL).</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;foo&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
      &lt;li&gt;foo&lt;/li&gt;
      &lt;li&gt;foo&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
      &lt;li&gt;foo&lt;/li&gt;
      &lt;li&gt;foo&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  my_selection = [];
  i = 0;
  // find all ul's that have more than one li
  $("ul").each(function(){
      if($(this).find("li").length &gt; 1){
          // add this to my_selection
          my_selection[i] = $(this);
          i++;
      } // if
  }); // each
  
  // wrap my_selection in div tags
  $(my_selection).wrapAll(document.createElement("div"));
  &lt;/script&gt;
  </code></pre>
  
  <p>The above code gives this firebug error:</p>
  
  <p><strong>"Node cannot be inserted at the specified point in the hierarchy" code: "3"</strong></p>
  
  <p>How can I make it work?</p>