Convert one menu code to another

Question

I have this menu generated by the server which I have no option to customise. The second level onwards are on separate divs

<div>
    <ul class='....'>
        <li id='......'>
            <a href='/'>Home</a>
        </li>
        <li id='..................'>
            <a href='/about.html'>About</a>
            <div class='.........' style='display:none'>
                <ul class='..........'>
                    <li id='..............'>
                        <a href='/services.html' >
                            <span class='.............'>Services</span>
                        </a>
                    </li>
                    <li id='...............'>
                        <a href='/costs.html' >
                            <span class='...........'>Costs</span>
                        </a>
                    </li>
                    <li id='................'>
                        <a href='/terms--conditions.html' >
                            <span class='............'>Terms & Conditions</span>
                        </a>
                    </li>
                </ul>
            </div>
        </li>
        <li id='.................'>
            <a href='/contact.html'>Contact</a>
        </li>
    </ul>
</div>

But I want to manipulate with using jQuery when the page has loaded. The class and ids are also generated which I want removed. Below is how it should look like after running the code:

<div>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About</a>
            <ul>
                <li><a href="/services.html">Services</a>

                </li>
                <li><a href="/costs.html">Costs/a>

                </li>
                <li><a href="/terms--conditions.html">Terms & Conditions</a>

                </li>
            </ul>
        </li>
        <li id="new-media-menu"><a href='/contact.html'>Contact</a></li>
    </ul>
</div>

jQuery code

function cleanMenuSelector(sel) {
    $(sel).removeAttr('class');
    $(sel).children('ul').each(function() {
        cleanMenuSelector($(sel))
    });
    $(sel).removeAttr('id');
}

$("div > ul").each(function() {
    cleanMenuSelector($(this));
})

On JS fiddle it gives me errors

Uncaught SyntaxError: Unexpected token } fiddle.jshell.net/_display/:33
Uncaught ReferenceError: $ is not defined
4
Uncaught TypeError: undefined is not a function
3
Uncaught TypeError: undefined is not a function

`$ is not defined` Obviously, you forgot to add jquery library. — Rajaprabhu Aravindasamy, Aug 11 '14 at 11:24
Not at all. You need to select it from the dropdown on the top left. — Rory McCrossan, Aug 11 '14 at 11:25

score 1 · Accepted Answer · answered Aug 11 '14 at 12:10

Placing it inside $document.ready made it work for me!

JSFIDDLE

$(document).ready(function(){
   function cleanMenuSelector(sel) {
       $(sel).removeAttr('class');
       $(sel).removeAttr('id');
   }

   $("div, ul, li").each(function() {
       cleanMenuSelector($(this));
   })
});

Convert one menu code to another

1 Answers1