jquery / javascript insert ul / li elements into this html

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>

James Khoury · Accepted Answer · 2011-05-05 02:35:32Z

3

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

answered May 5, 2011 at 2:35

James Khoury

22.6k4 gold badges36 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hlp_seeker Over a year ago

No explanation needed, that's exactly what I was looking for, thank you so much :).

James Khoury Over a year ago

@jason I didn't realise you could add the class with a single tag. I thought you had to add everything in those cases. Thanks!

Jason McCreary Over a year ago

jQuery is pretty flexible with it's chainability and dynamic element creation.

hlp_seeker Over a year ago

Just a quick one, would there be a particular reason why this might not function correctly in IE7? seems to be working fine in everything else.

Edgar Villegas Alvarado · Accepted Answer · 2011-05-05 03:08:21Z

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();
 });

Collectives™ on Stack Overflow

jquery / javascript insert ul / li elements into this html

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related