Javascript 如何检索所有子元素和子元素？

我需要某种机制来给我这个：在我点击parent->给我所有的子值之后。->单击一个子值->给我所有子子值

Item <- click on it          Item <- click on it
--------------------         --------------------
Item1 <- click on it   OR    Item1
Item2                        Item2 <- click on it
--------------------         --------------------
Item11                       Item21

---

Item如果使用Jquery选择器，以下代码应该可以工作：

var children = $(element).children();

只需使用所需的选择器替换元素。
尝试以下操作：


$（'div'）。单击（函数（）{
var c=$（this.children（）；
console.log（c.text（））
})

你好，我是项目，点击我！我会给你项目1和项目2
你好，我是Item1。点击我，我会给你项目11
您好，我是项目11，我后面没有其他元素了。
你好，我是项目2。点击我，我会给你项目21！
您好，我是Item21，后面没有其他元素了。
您可以找到下一个
元素
直到
div
开始使用jQuery
.nextUntill

$('strong').on('click', function() {
    var nexts = $(this).nextUntil('div');
})


$（'strong'）。在（'click'，function（）上{
console.log（$（this.nextUntil（'div'）.length）
})

你好，我是项目，点击我！我会给你项目1和项目2
你好，我是Item1。点击我，我会给你项目11
您好，我是项目11，我后面没有其他元素了。
你好，我是项目2。点击我，我会给你项目21！
您好，我是Item21，后面没有其他元素了。
请参阅此

你好，我是项目，点击我！我会给你项目1和项目2
你好，我是Item1。点击我，我会给你项目11
您好，我是项目11，我后面没有其他元素了。
你好，我是项目2。点击我，我会给你项目21！
您好，我是Item21，后面没有其他元素了。

JS

$（文档）.ready（函数（）{
$（“div”）。在（“单击”）上，函数（事件）{
event.stopPropagation（）；
var html=“”；
$（this.find（“>div”）.each（function（）{
html+=$（this.attr（“id”）+“
”；
})
$（“.children show div”）.html（html）
})
})

$（'div'）。在（“单击”）上，功能（ev）{
var$children=$（this.children（“div”）；//获取div类型的子级
//或var$children=$（this）.find（“div”）；//获取子项及其子项。。。
//测试：
$children.each（函数（）{
console.log（this.id）；
});
//阻止事件冒泡
ev.stopPropagation（）；
})

你好，我是项目，点击我！我会给你项目1和项目2
你好，我是Item1。点击我，我会给你项目11
您好，我是项目11，我后面没有其他元素了。
你好，我是项目2。点击我，我会给你项目21！
您好，我是Item21，后面没有其他元素了。
另一种方法是基于分析

最重要的是：

启动事件的DOM元素

目标属性可以是为事件注册的元素或其后代。将event.target与此进行比较通常很有用，以便确定事件是否由于事件冒泡而被处理。当事件冒泡时，此属性在事件委派中非常有用

因此，由于您的div有一个id，我建议监听与该div相关的所有单击事件：


$（“#项”）。在（'click'，函数（e）{
//
//如果在div之外单击（即：在强标记上）
//获取相应的div元素
//
var ele=e.target.tagName=='DIV'？
$（e.target）：$（e.target）.最近（'div'）；
//
//获取属于当前ele的所有div子级
//
ele.children（'div'）。每个（函数（）{
console.log（this.id）；
});
})

你好，我是项目，点击我！我会给你项目1和项目2
你好，我是Item1。点击我，我会给你项目11
您好，我是项目11，我后面没有其他元素了。
你好，我是项目2。点击我，我会给你项目21！
您好，我是Item21，后面没有其他元素了。
jQuery子项不是您想要的吗？预期的结果不是很清楚吗？你能再解释一下吗！我不建议为此使用ID，而是使用更具语义的东西。这是某种描述的父类和子类，还是使用
和
取决于您。
$('strong').on('click', function() {
    var nexts = $(this).nextUntil('div');
})

 <div id="item"> Hello I am <strong>Item</strong>, click on me! I will give you <strong>Item1</strong> and <strong>Item2</strong>
 <div id="item1"> Hello I am <strong>Item1</strong>. Click on me I will give you <strong>Item11</strong>
    <div id="item11"> Hello I am <strong>Item11</strong>, there is no more element after me.</div>
 </div>
 <div id="item2"> Hello I am <strong>Item2</strong>. Click on me I will give you <strong>Item21</strong>!
    <div id="item21">Hello I am <strong>Item21</strong>, there is no more element after me.</div>
</div>
</div>
<div class="children-show-div">
</div>
</div>

$(document).ready(function() {
 $("div").on("click", function(event) {
 event.stopPropagation();
 var html ="";
  $(this).find("> div").each(function() {
     html += $(this).attr("id") + "<br/>";
  })

   $(".children-show-div").html(html)
  })
 })