Question

I have created a nested ul li tree. I want a radio or a checkbox control before each li node. For that I have a class="single/multiple" for each li. Now I have created a jquery nested function which scans through all the li’s and append a radio or a checkbox control. It is working fine.

JQUERY:

var count = 0;
$(function(){
    AddCBRadNodes($("#tree").children("ul"));
});


function AddCBRadNodes(node) {
    count = count+1;
    $(node).children("li").each(function() {
        if($(this).hasClass("single")) {
            $(this).prepend("<span><input type='radio' name='rad_"+count+"' /></span>");
        }
        else if($(this).hasClass("multiple")) {
            $(this).prepend("<span><input type='checkbox' name='cb_"+count+"' /></span>");
        }

        //Nesting here
        if($(this).children("ul").children("li").size() > 0) {
            AddCBRadNodes($(this).children("ul"));
        }
    });
}​

Fiddle is here – http://jsfiddle.net/ashwyn/Y46Dw/1/

What I am unable to do is that I need a unique name for each li level. For eg. A1, A2, A3 should have same name but different name than other li’s. If you will analyse the controls in firebug then you will understand that my current jquery is assigning rad_1 to P1, rad_6 to P2 and P3. It is logic issue regarding which I desperately need help. Thanks in advance.

Answer 1

Simplified jquery to show only radio.

Here is the working fiddle.

http://jsfiddle.net/ashwyn/Y46Dw/14/

If there is a previous li sibling then I copied the name or else I have incremented the count.