Get all parents in a <ul> <li> structure using jquery

Question

I have a bottom structure in HTML that I use to create a tree structure using jquery.

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

each li element has a switch next to it (not shown in the code, please assume that).

Now, if I select the "Child" value from the above code, then I should get the result below "Great Parent> Parent> Child" and if I choose the parent, then I should get "Great Parent> Parent"

So basically I want to get the parent with all of its child

Please advise how I can get the result using jquery

section 1

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

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

 $(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/

Registered Switch Selection

If you want to select the elements on the basis of which the switch is set, you can simply use the .parents() method.

Assuming the following HTML markup:

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

In the button click event, you can do the following:

 $('button').click(function() { var $obj = $('input[type="radio"]:checked').parents('li'); // The $obj jQuery collection contains your result }); 

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

Get the path to text as text

Since there are nested elements, we cannot use the jQuery .text() method, since it also returns combined text from all child elements.

The solution is to create 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 assumes the same markup as above, the second child of the element list, the first of which is the switch).

 $('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 the following:

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

Answer 3

 $('li').parents() 

will display all the parents of this li

Answer 4

 $('input[type="radio"]').change(function() { var $el = $(this); //current radio var $parents = $el.parents('input[type="radio"]'); //parent radios }); 

Answer 5

I do not quite understand your intention. However, I think the combination of the selector may be what solves it. For example, something like this should work:

 $(':parent li') 

Answer 6

I did not understand your question correctly.

Although I think this is what you want:

 $(somethin).parent().children();