$(this).children() not functioning

user_19242213 0
Viewed 38

I'm trying to create a list of ".years". When I click on the first year (es.2009) it should show only the Content that it's inside that year (in this case "Content1"). And when I click on another element of the list .years, "Content1" should hide.

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

this jquery javascript
2 Answers

  1. Your HTML is pretty much invalid, you should not put div inside ul and outside li. Onl li is valid direct child of ul.

  2. Put div inside li and you should be fine because then it will be child of your "years" element.

user_4208480

You have invalid markup = the <ul> should only contain <li>. Move the trailing/end tag close and the you can toggle the child elements as you desire.

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

user_1259810
Related