Question 304199 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Add class to children based on data attribute of parent

I have a simple difficulty scale. As I only know some basics of jQuery and JavaScript I don’t know what I’m searching for. I want to add the class active to the item based on the data-attribute of the parents element.

Below two examples how it should look like at the end.

<div class='difficulty-wrapper' data-difficulty='1'>
  <span class='difficulty-item active'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
</div> 

<div class='difficulty-wrapper' data-difficulty='4'>
  <span class='difficulty-item active'></span>
  <span class='difficulty-item active'></span>
  <span class='difficulty-item active'></span>
  <span class='difficulty-item active'></span>
</div>
Tags:

2

Answers


  1. 0 
         <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Difficulty Scale</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    .difficulty-item {
      /* Add your styling for difficulty items here */
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #ccc;
      margin: 2px;
    }

    .active {
      /* Add your styling for active difficulty items here */
      background-color: #00f; /* Change the background color for active items */
    }
  </style>
</head>
<body>

<div class='difficulty-wrapper' data-difficulty='1'>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
</div> 

<div class='difficulty-wrapper' data-difficulty='4'>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
</div>

<script>
  $(document).ready(function() {
    // Iterate through each difficulty-wrapper
    $('.difficulty-wrapper').each(function() {
      // Get the data-difficulty attribute value
      var difficulty = $(this).data('difficulty');
      
      // Find the corresponding difficulty-item elements and add the "active" class to them
      $(this).find('.difficulty-item:lt(' + difficulty + ')').addClass('active');
    });
  });
</script>

</body>
</html>

    This script uses jQuery to iterate through each .difficulty-wrapper element, retrieves the data-difficulty value, and adds the "active" class to the corresponding number of .difficulty-item elements within that wrapper. The :lt() selector is used to select elements with an index less than the specified value (in this case, the difficulty level).

    Login or Signup to reply.
  2. 0

    You may not need to actually add a class at all. You can select the child divs directly based on the attribute and set the styling on the elements from there.

    Here’s an example targeting the difficulty="4" set of elements:

    .difficulty-wrapper[data-difficulty="4"] > span.difficulty-item {
  font-weight: 800;
  color: #C00;
}
    <div class="difficulty-wrapper" data-difficulty="1">
  <span class="difficulty-item">1-1</span>
  <span class="difficulty-item">1-2</span>
  <span class="difficulty-item">1-3</span>
  <span class="difficulty-item">1-4</span>
</div>

<div class="difficulty-wrapper" data-difficulty="4">
  <span class="difficulty-item">4-1</span>
  <span class="difficulty-item">4-2</span>
  <span class="difficulty-item">4-3</span>
  <span class="difficulty-item">4-4</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search