I have an HTML file like this:
JS:
function functionName(event) {
event.stopPropagation();
var item = event.data.param;
document.getElementById("list").innerHTML = item;
}
$(document).ready(function() {
$("li").each(function() {
$(this).on('click', {param: this.id}, functionName);
});
});
HTML:
<div id="main">
<div id="tree">
<ul class="xyz">
<li class="hide">AVC</li>
<li class="hide">Anna</li>
<li class="hide">Peter</li>
<li id="foo1">Gary
<ul class="xyz">
<li class="hide">John</li>
<li class="hide">Anna</li>
<li id="foo2">Briton
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo3">Layla
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo4">Undertaker
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="list"></div>
</div>
I have two div tags whose id is receptively tree
and list
. Tree div contains the nested ul li
tags and each li
have unique id.
I want to show the first level children of a ul li
tag. For example, when I am clicking on Gary
, it should show the first level children ( John, Anna, Britton
) in right div ie list
.
Right now I am able to get the id of ul li
element in list
div when clicking any item.
How can I traverse the first level children of clicking element using jquery/javascript and display them in list
div?
Thanks
Try using find()
, > ul
selects the direct descendant
$('li[id^="foo"]').click(function(e){
e.stopPropagation();
var x = $(this).last().find(' > ul').clone().find('ul').remove().end();
console.log(x[0])
$('#list').html(x);
$('#list .hide').show();
});
simple demo : https://jsfiddle.net/sk30mwud/4/
'$('#tree').on('click', 'li', function(){
$(this).find('> ul > li').toggleClass('hide');
return false;
})'
Can you please take a look at this approach:
It uses .contents().get(0).nodeValue
to fetch the text present in child li
nodes and not from its childerns if any.
function functionName(event) { event.stopPropagation(); var item = event.data.param; var names = []; $("#" + item).children("ul").children("li").each(function() { names.push($(this).contents().get(0).nodeValue); }); $("#list").text(names.join(","));; } $(document).ready(function() { $("li").each(function() { $(this).on('click', { param: this.id }, functionName); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="main"> <div id="tree"> <ul class="xyz"> <li class="hide">AVC</li> <li class="hide">Anna</li> <li class="hide">Peter</li> <li id="foo1">Gary <ul class="xyz"> <li class="hide">John</li> <li class="hide">Anna</li> <li id="foo2">Briton <ul class="xyz"> <li class="hide">gg</li> <li class="hide">hh</li> <li id="foo3">Layla <ul class="xyz"> <li class="hide">gg</li> <li class="hide">hh</li> <li id="foo4">Undertaker <ul class="xyz"> <li class="hide">gg</li> <li class="hide">hh</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div id="list"></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.