$(this).children() 不工作

Question

我正在尝试创建一个“.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>

Answer 1

你的 HTML 几乎是无效的，你不应该把 div 放在 ul 和 li 外面。只有 li 是 ul.
的有效直系子代
把 div 放在 li 里面，你应该没问题，因为那样它将是你的“年”元素。

Answer 2

您的标记无效 = <ul> 应该只包含 <li>。将 trailing/end 标签移近，您可以根据需要切换子元素。

$(".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>

$(this).children() 不工作

$(this).children() not functioning

javascript

jquery

this