提问人：la_llum 提问时间：6/1/2022 最后编辑：Mark Schultheissla_llum 更新时间：6/1/2022 访问量：55
$（this）.children（） 不起作用
$(this).children() not functioning
问：
我正在尝试创建一个“.years”列表。当我单击第一年（es.2009）时，它应该只显示该年的内容（在本例中为“Content1”）。当我单击列表.years的另一个元素时，“Content1”应该隐藏。
$(".years").click(function(e) {
e.preventDefault();
console.log($(this).children());
//console.log($(this).find("h5"));
//.find($(".award"))
//$('.award').toggleClass('active'); //this is what I want to do
});.award {
display: none;
}
.award.active {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="years">2004</li>
<div class="award">
<h5>Content1</h5>
</div>
<li class="years">2009</li>
<div class="award">
<h5>Content2</h5>
</div>
<div class="award">
<h5>Content3</h5>
</div>
</ul>答：
5赞
Moebius
6/1/2022
#1
你的 HTML 几乎是无效的，你不应该把 div 放在 ul 里面，放在 li 外面。Onl li 是 ul 的有效直系子项。
将 div 放在 li 中，你应该没问题，因为那样它将成为你的“years”元素的子元素。
1赞
Mark Schultheiss
6/1/2022
#2
您的标记无效 = 应该只包含 .将尾部/结束标签移近，您可以根据需要切换子元素。<ul><li>
$(".years").on('click', function(e) {
e.preventDefault();
console.log($(this).children('.award').length);
$(this).find('.award').toggleClass('active');
});.award {
display: none;
}
.award.active {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="years">2004
<div class="award">
<h5>Content1</h5>
</div>
</li>
<li class="years">2009
<div class="award">
<h5>Content2</h5>
</div>
<div class="award">
<h5>Content3</h5>
</div>
</li>
</ul>
评论