jquery / javascript insert ul / li elements into this html

is it possible to amend the following html into the source linked at the bottom of this page? I have limited scripting access to the source page so I'm looking for a way to change the page using jquery or js.

Also the department id's will be completely random and there will be a different number of links rela开发者_StackOverflow社区tive to each group, therefore it will need to be dynamic. I've tried appending but I'm having trouble as inserting starting or closing tags only, so not sure how to go about this. Thanks in advance for any help offered.

Additions I need in the code are marked with **'s

Original source:

<ul class="menu">
  <a id="group-car" href="#">Car</a>  
   <li><a id="department-2" href="link">Black</a></li>
   <li><a id="department-4" href="link">Blue</a></li>

  <a id="group-bike" href="#">Bike</a>  
   <li><a id="department-1" href="link">BMX</a></li>
   <li><a id="department-6" href="link">Racing</a></li>
   <li><a id="department-12" href="link">Mountain</a></li>             
</ul>

What I need to end up with:

 <ul class="menu">
    **<li>**
        <a id="group-car" href="#">CAR</a>
        **<ul class="acitem">**  
            <li><a id="department-2" href="link">Black</a></li>
            <li><a id="department-4" href="link">Blue</a></li>
        **</ul>**
    **</li>**

    **<li>**
        <a id="group-bike" href="#">BIKE</a>
        **<ul class="acitem">**
            <li><a id="department-1" href="link">BMX</a></li>
            <li><a id="department-6" href="link">Racing</a></li>
            <li><a id="department-12" href="link">Mountain</a></li>
        **</ul>**
    **</li>**          
</ul> 

jQuery(".menu").children("a").each(function()
{
    jQuery(this).nextUntil("a").add(this).wrapAll("<li></li>");
    jQuery(this).nextUntil("a").wrapAll("<ul></ul>");

});

Does this need some explanation?

EDIT oops! I didn't see the classes on them:

jQuery(".menu").children("a").each(function()
{
    jQuery(this).nextUntil("a").add(this).wrapAll("<li></li>");
    var jUL = jQuery("<ul></ul>").addClass("acitem");
    jQuery(this).nextUntil("a").wrapAll(jUL);

});

jsFiddle

What a beautiful challenge!! Here you have. Tested in FF 3.6 and works!

function fixMarkup(){
    var liFamilies = [];
    var iFamily = 0;
    $(".menu li").each(function(){
      if($(this).prev().is("a")) 
        liFamilies[iFamily] = [this]; //Start a family
      else
        liFamilies[iFamily].push(this); //Append to family
      if($(this).next().is("a")) iFamily++; //A new family begins
    });
    //console.log(liFamilies);
    for(var i = 0; i< liFamilies.length; i++){
      var family = liFamilies[i];
      $(family).wrapAll('<ul class="acitem" />');  
      var ulNew = $(family[0]).parent()[0];
      var aElem = $(ulNew).prev()[0];  
      $([aElem, ulNew]).wrapAll("<li/>");
    }
 }   
 $(document).ready(function(){
    fixMarkup();
 });