javascript - how to set class names in list item

Question

I have five HTML li elements. Let's say if the 3rd li element has the active class, then I want the 1st and 2nd li element to have class complete. First remove the class whatever 1st and 2nd li element has, then add the class complete. If the 3rd li element has class name active, then the 4th li element should have half-complete class name. The last li element should have nothing.

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

</ul> 

Answer 1

<ul>
    <li class="something1">Coffee</li>
    <li class="something2">Tea</li>
    <li class="something">Milk</li>
    <li class="something3">Milk</li>
    <li class="delivered">Milk</li>
</ul>


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

Note: "half-completed" is no longer added.