Jquery - Add class to a child on each click

AdamPablo
July 14, 2023
200 views
1 vote
2 Answers

On click anchor and scroll, need to add a class to each first div which is the child element of particular ID.

$(document).ready(function() {
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
      // Store hash
      var hash = this.hash;
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
        $(".box:first").addClass("black");
      });
    } // End if
  });
});

#Segment1 {
  background-color: yellow;
  padding: 50px;
}

#Segment2 {
  background-color: pink;
  padding: 50px;
}

.box {
  padding: 10px 20px;
  border: 1px solid #000000;
  margin-bottom: 5px;
}

.gray {
  background-color: lightgray;
}

.black {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<a href="#Segment1" class="">Segment1</a>
<a href="#Segment2" class="">Segment2</a>

<br><br><br><br><br>

<div id="Segment1">
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
</div>

<div id="Segment2">
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
</div>

Tags: jquery

Answers

You can use the hash variable value to achieve your goal. Also use :eq(index) to select the first box each time.

Working snippet:

$(document).ready(function() {
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {
        window.location.hash = hash;
        $('.box').removeClass("black");//remove class from previous div
        $(hash+" .box:eq(0)").addClass("black"); // add class to current div
      });
    }
  });
});

#Segment1 {
  background-color: yellow;
  padding: 50px;
}

#Segment2 {
  background-color: pink;
  padding: 50px;
}

.box {
  padding: 10px 20px;
  border: 1px solid #000000;
  margin-bottom: 5px;
}

.gray {
  background-color: lightgray;
}

.black {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#Segment1" class="">Segment1</a>
<a href="#Segment2" class="">Segment2</a>

<br><br><br><br><br>

<div id="Segment1">
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
</div>

<div id="Segment2">
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
</div>

Here is my suggestion.

Remove the class from all
Add class to the one belonging to the hash
Change the if to make code shorter/simpler

$(function() {
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash === "") return;
    $('.box').removeClass("black"); // remove from all
    // Prevent default anchor click behavior
    event.preventDefault();
    // Store hash in scope
    var hash = this.hash;
    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {
      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
      const $parent = $(hash);
      $('.box:first', $parent).addClass("black");
    });

  });
});

#Segment1 {
  background-color: yellow;
  padding: 50px;
}

#Segment2 {
  background-color: pink;
  padding: 50px;
}

.box {
  padding: 10px 20px;
  border: 1px solid #000000;
  margin-bottom: 5px;
}

.gray {
  background-color: lightgray;
}

.black {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<a href="#Segment1" class="">Segment1</a>
<a href="#Segment2" class="">Segment2</a>

<br><br><br><br><br>

<div id="Segment1">
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
</div>

<div id="Segment2">
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Add class to a child on each click

Answers