CODEWITHSUNDEEP
javascriptjquerythis
la_llum
la_llum

Reputation: 13

$(this).children() not functioning

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>

Upvotes: 1

Views: 60

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

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>

Upvotes: 1

Moebius
Moebius

Reputation: 668

  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.

Upvotes: 5

Related Questions