CODEWITHSUNDEEP
javascripthtml
Richardson
Richardson

Reputation: 2285

Add a class to an element's classList at a certain position

Can I add a class to certain position, to keep some order since it contradicts with some logic that targets the class by its position ?

link.closest('item').classList.add('c-class')

// Contradicton We need (a-class) insted I get (c-class) that has been added
let getThisClass = e.target.parentElement.classList[1]
<!-- before adding -->
<li class="item aclass bclass" id="60fe102d6e87274484dd2785"></li>
<!-- after adding -->
<li class="item c-class a-class b-class" id="60fe102d6e87274484dd2785"></li>

Upvotes: 0

Views: 1165

Answers (2)

Spectric
Spectric

Reputation: 31992

You can try splitting the className by spaces, inserting an item at a certain position of the resulting array (with the use of Array#splice) and reassigning back to the className after joining by spaces:

const link = document.getElementById("60fe102d6e87274484dd2785");
list = link.className.split(" ");
list.splice(1, 0, "c-class")
link.className = list.join(" ");
console.log(link.className);
<!-- before adding -->
<li class="item aclass bclass" id="60fe102d6e87274484dd2785"></li>

As a generic function:

const link = document.getElementById("60fe102d6e87274484dd2785");
insertClassAtPosition(link, "c-class", 1);
console.log(link.className);

function insertClassAtPosition(element, className, index){
  let l = element.className.split(" ");
  l.splice(index, 0, className);
  element.className = l.join(" ");
}
<!-- before adding -->
<li class="item aclass bclass" id="60fe102d6e87274484dd2785"></li>

Upvotes: 5

user2182349
user2182349

Reputation: 9782

// get the link
const link = document.getElementById("link");

// get the item
const item = link.closest('.item');

// append c-class
item.className += ' c-class';
console.log(item.className);

// remove c-class
item.className = item.className.replace(/c-class/,'').trim();
console.log(item.className);
<!-- before adding -->
<li class="item a-class b-class" id="60fe102d6e87274484dd2785"><a id="link">#</a></li>

Upvotes: 1

Related Questions