Tips on assigning class names to list items

Question

Tips on assigning class names to list items

I have a series of HTML li elements. In this scenario, if the 3rd li element is marked as active, then I would like to set the 1st and 2nd li elements as complete. To achieve this, I will first remove any existing classes from the 1st and 2nd li elements, and then add the complete class. Additionally, when the 3rd li element has the active class, I want the 4th li element to be half-complete. Lastly, the last li element should not have any class associated with it.

<ul>
  <li class="complete">Coffee</li>
  <li class="complete">Tea</li>
  <li class="active">Milk</li>
  <li class="half-complete">Milk</li>
  <li>Milk</li>

</ul>

javascript html jquery css

Answer 1

Answer №1

Check out this handy jQuery solution:

$('ul li').on('click', function() {
  $('ul li').removeClass('active complete half-complete');
  
  $(this).prevAll('ul li').addClass('complete');
  $(this).addClass('active').next('ul li').removeClass('complete').addClass('half-complete');
  
  console.log($('ul').html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="complete">Coffee</li>
  <li class="complete">Tea</li>
  <li class="active">Milk</li>
  <li class="half-complete">Milk</li>
  <li>Milk</li>
</ul>

Answer 2

Check out this handy jQuery solution:

$('ul li').on('click', function() {
  $('ul li').removeClass('active complete half-complete');
  
  $(this).prevAll('ul li').addClass('complete');
  $(this).addClass('active').next('ul li').removeClass('complete').addClass('half-complete');
  
  console.log($('ul').html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="complete">Coffee</li>
  <li class="complete">Tea</li>
  <li class="active">Milk</li>
  <li class="half-complete">Milk</li>
  <li>Milk</li>
</ul>

Answer 3

Answer №2

<ul>
    <li class="item1">Coffee</li>
    <li class="item2">Tea</li>
    <li class="item">Milk</li>
    <li class="item3">Milk</li>
    <li class="delivered-item">Milk</li>
</ul>


  let deliveredParent = document.querySelector(".delivered-item").parentElement;
  let children = [...deliveredParent.children];
  for(let i = 0; i < children.length; i++){
    let child = children[i];
    if(child.classList.contains("delivered-item")) break;
    child.className = "complete-item";
  }

Note: "half-completed" is now excluded.

Answer 4

<ul>
    <li class="item1">Coffee</li>
    <li class="item2">Tea</li>
    <li class="item">Milk</li>
    <li class="item3">Milk</li>
    <li class="delivered-item">Milk</li>
</ul>


  let deliveredParent = document.querySelector(".delivered-item").parentElement;
  let children = [...deliveredParent.children];
  for(let i = 0; i < children.length; i++){
    let child = children[i];
    if(child.classList.contains("delivered-item")) break;
    child.className = "complete-item";
  }

Note: "half-completed" is now excluded.

Tips on assigning class names to list items

Answer №1

Answer №2

Similar questions

Can JavaScript be used to dynamically update drop down lists in a gridview?

Version 1 of Vue.js is not compatible with Ajax-loaded HTML files

Checking the validity of user input statements

What is the best way to add elements to an array that has not been globally initialized as an empty array?

Retrieve information and display it in a text field using ajax

Enhancing functionality through the press of a button

Populating lists using AJAX technology

Sorting a list with anchor tags alphabetically using Javascript/JQuery

Troubleshooting: CSS Selectors Hover Functionality Not Functioning as

Changing Pages in MVC Using JavaScript Language

Unable to execute internal functional tests due to this error: [POST http://localhost:4444/wd/hub/session] unable to connect - ECONNREFUSED

Ensuring that my divs remain stationary despite changes in the size of the browser window

Ways to create a horizontal navigation menu using jQuery UI

The navigation bar components created with Bootstrap are experiencing issues with their active state functionality

You won't find the "Go to Definition" feature for CSS classes in Visual Studio 2013

What could be causing the issue of angular data-binding not functioning properly in conjunction with jquery

What is the method for displaying a message in an invalid feedback?

Content is missing from the response of the AngularJS $http request

Avoid closing the login modal/popup form if there is a validation error

A collection of functions embedded within a JSON data structure