CODEWITHSUNDEEP
javascriptjqueryhtml-lists
hlp_seeker
hlp_seeker

Reputation: 13

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

Upvotes: 1

Views: 1051

Answers (2)

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

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

Upvotes: 0

James Khoury
James Khoury

Reputation: 22369

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

Upvotes: 3

Related Questions