Question

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 relative 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> 

Answer 1

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

});

jsfiddle

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