get all parents in <ul><li> structure using jquery

Question

i have the below structure in HTML, which i use to create a tree structure using jquery.

Click to copy

<ul>
        <li>Grand Parent
            <ul>
                <li>Parent
                    <ul>
                        <li>child</li></ul>
                </li>
            </ul>
        </li>
    </ul>

every li element has a radio button next to it (not shown in the code, please assume that).

Now if a select value "Child" from the above code then i should get the below result "Grand Parent > Parent > Child" and if i select parent then i should get "Grand Parent > Parent"

So basically the i want to get parent with all its child

Please advise how can i get the above result using jquery

section 1

Click to copy

<ul class='tree js-catTree'><li><a class='expand'></a><span class='treeNodeInner'><input type='radio' name='category'><a id='10209'>Business</a><ul><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10212'>Top</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10214'>New</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10413'>Email and Messaging</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10414'>Finance</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10415'>Mobile Office</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10416'>Sales and Field Force</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10417'>Calculators  Converters</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10418'>Travel  Transportation</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10419'>Reference</a></span></li></ul></span></li><li><a class='expand'></a><span class='treeNodeInner'><input type='radio' name='category'><a id='10962'>asdasd</a><ul><li><a class='expand'></a><span class='treeNodeInner'><input type='radio' name='category'><a id='10964'>asd</a><ul><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10420'>Backup  Optimization</a></span></li></ul></span></li></ul></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10974'>test_23March</a></span></li></ul>

thanks

Answer 1

Inside an event handler on the element

Put this code inside your event handler to get all parents:

Click to copy

$(this).parents('li').add(this).each(function() {
    // This should iterate through all parent <li>s and the current one too
});

Try this demo: http://jsfiddle.net/XPL7G/

Selecting based on a checked radio button

If you want to select the elements based on which radio button is checked, you can just use the .parents() method.

Assuming the following HTML markup:

Click to copy

<ul>
    <li><input type="radio" name="li"> Grand Parent
        <ul>
            <li><input type="radio" name="li"> Parent
                <ul>
                    <li><input type="radio" name="li"> child</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<button>Show me</button>

You can do the following in the button's click event:

Click to copy

$('button').click(function() {
    var $obj = $('input[type="radio"]:checked').parents('li');

    // The $obj jQuery collection contains your result
});

Try a demo: http://jsfiddle.net/XPL7G/1/

Get breadcrumb path as text

As there are nested elements, we can't use jQuery's .text() method, as it would return the combined text from all children as well.

The solution is to make an array of our jQuery object, reverse the order, then iterate through them, extracting the text node with raw HTML DOM functions as we go (which assuming the same markup as above is the second child of the list item, the first being the radio button).

Click to copy

$('button').click(function() {
    var $obj = $('input[type="radio"]:checked').parents('li');

    var result = '';
    $($obj.get().reverse()).each(function(){
        if(result) result += ' > ';
        result += this.childNodes[1].nodeValue;
    });

    // The variable result contains our text breadcrumb
});

Demo: http://jsfiddle.net/XPL7G/6/

Answer 2

try this:

Click to copy

console.log($('ul :parent'));//return all parent node within first `ul`