Javascript 使用jquery显示嵌套ul li的第一级子级

我有这样一个HTML文件：

JS:

HTML:

AVC
安娜
彼得
加里

约翰
安娜
英国人

gg
hh
莱拉

gg
hh
承办人

gg
hh

我有两个div标签，其id是可接受的

tree

和

list

。Tree div包含嵌套的

ul li

标记，每个

li

都有唯一的id

我想显示

ulli

标记的第一级子级。例如，当我单击Gary时，它应该在右侧的

分区（即列表）中显示第一级子项（
John，Anna，Britton
）

现在，当单击任何项目时，我能够在
list
div中获取
ul li
元素的id

如何使用jquery/javascript遍历clicking元素的第一级子元素，并将它们显示在
list
div中

谢谢
尝试使用
find（）
，
>ul
选择直系后代

$('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();
});

简单演示：
尝试使用
find（）
，
>ul
选择直系后代

$('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();
});

简单演示：
您能看看这种方法吗：

它使用
.contents（）.get（0）.nodeValue
获取子
li
节点中的文本，而不是从其子节点（如果有）获取文本


函数函数名（事件）{
event.stopPropagation（）；
变量项=event.data.param；
变量名称=[]；
$（“#”+项）。子项（“ul”）。子项（“li”）。每个（函数（）{
names.push（$（this.contents（）.get（0.nodeValue））；
});
$（“#列表”）.text（name.join（“，”）；；
}
$（文档）.ready（函数（）{
$（“li”）。每个（函数（）{
$（此）。在（'单击'）{
param:this.id
}，函数名）；
});
});


AVC
安娜
彼得
加里

约翰
安娜
英国人

gg
hh
莱拉

gg
hh
承办人

gg
hh









您能看看这种方法吗：

它使用
.contents（）.get（0）.nodeValue
获取子
li
节点中的文本，而不是从其子节点（如果有）获取文本


函数函数名（事件）{
event.stopPropagation（）；
变量项=event.data.param；
变量名称=[]；
$（“#”+项）。子项（“ul”）。子项（“li”）。每个（函数（）{
names.push（$（this.contents（）.get（0.nodeValue））；
});
$（“#列表”）.text（name.join（“，”）；；
}
$（文档）.ready（函数（）{
$（“li”）。每个（函数（）{
$（此）。在（'单击'）{
param:this.id
}，函数名）；
});
});


AVC
安娜
彼得
加里

约翰
安娜
英国人

gg
hh
莱拉

gg
hh
承办人

gg
hh









不是这样的。我能做你说的这件事。我想显示
树
div到
列表
div的单击项的子项。我正在尝试使用html和jquery/javascript创建树列表视图。是的，像这样，但正如您所看到的，一些子项隐藏在我的html文件中。我也想在这里看到他们。像这样：或者像这样：或者？你只想让分支的第一个孩子看到^I想用你所给的第三种方式来做。谢谢你的回答。不要这样。我能做你说的这件事。我想显示
树
div到
列表
div的单击项的子项。我正在尝试使用html和jquery/javascript创建树列表视图。是的，像这样，但正如您所看到的，一些子项隐藏在我的html文件中。我也想在这里看到他们。像这样：或者像这样：或者？你只想让分支的第一个孩子看到^I想用你所给的第三种方式来做。谢谢你的回答。同：$（this）。children（'ul'）。children（'li'）；同：$（this.children（'ul'）。children（'li'）；
$('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();
});

'$('#tree').on('click', 'li', function(){
     $(this).find('> ul > li').toggleClass('hide');
     return false;
})'