CODEWITHSUNDEEP
javascripthtmljquerycss
mrtyvz61
mrtyvz61

Reputation: 87

how to set class names in list item

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>

Upvotes: 1

Views: 1620

Answers (2)

arctan2
arctan2

Reputation: 567

<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.

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15213

Here's the jQuery solution.

$('ul li').on('click', function() {
  $('ul li').removeClass('active complete hafl-complete');
  
  $(this).prevAll('ul li').addClass('complete');
  $(this).addClass('active').next('ul li').removeClass('complete').addClass('hafl-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="hafl-complete">Milk</li>
  <li>Milk</li>
</ul>

Upvotes: 2

Related Questions