[Special Summer Sale] 40% OFF All Magento 2 Themes

VIEW OFFER

Cart

Add class to children based on data attribute of parent

Home TopicAdd class to children based on data attribute of parent
  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 13, 2023 at 9:10 am #9338
    mrmoon97
    Participant

    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>
    December 13, 2023 at 9:15 am #9340
    niko-cxvedadze
    Participant
         <!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).

    December 13, 2023 at 9:17 am #9339
    rory-mccrossan
    Participant

    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>
    December 13, 2023 at 9:51 am #9341
    imhvost
    Participant

    Without Jquery:

    document.querySelectorAll('.difficulty-wrapper').forEach(wrapper => {
  const difficulty = wrapper.dataset.difficulty || 0;
  const items = [...wrapper.querySelectorAll('.difficulty-item')].slice(0, difficulty);
  items.forEach(item => item.classList.add('active'));
})
    .difficulty-wrapper {
  display: flex;
  gap: 2px;
}

.difficulty-wrapper:not(:last-child) {
  margin-bottom: 2px;
}

.difficulty-item {
  width: 48px;
  height: 32px;
  border-radius: 2px;
  background-color: yellow;
  border: solid 1px red;
}

.difficulty-item.active {
  background-color: blue;
}
    <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>
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.