Reputation: 7045
i have the below structure in HTML, which 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>
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
<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
Upvotes: 5
Views: 11446
Reputation: 16591
Put this code inside your 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/
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:
<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:
$('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/
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).
$('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/
Upvotes: 8
Reputation: 5279
I did not understand your question properly..
Though I think this is what you want :
$(somethin).parent().children();
Upvotes: 0
Reputation: 87073
try this:
console.log($('ul :parent'));//return all parent node within first `ul`
Upvotes: 1
Reputation: 5068
I don't exactly understand your intention.
However I think the combination of selector may be what solves it. For example something like this should work:
$(':parent li')
Upvotes: 0
Reputation: 1428
$('input[type="radio"]').change(function() {
var $el = $(this); //current radio
var $parents = $el.parents('input[type="radio"]'); //parent radios
});
Upvotes: 0