how to add a class at first position using jquery?

Question

I have an element with more than 5 classes. I just need to replace the class in first position without affecting the rest of them ..

I don't want to replace all classes (I have tried with .attr('class','class1 class2 class3 class4 class5') , .prop , .switchclass etc)..

Answer 1

Its very Simple thing. Only use

element.addClass('YourClass');

for removing Any Class

element.removeClass('YourClass');

Answer 2

You don't have to use jQuery for that: just address DOM Element and its className attribute directly. For example (assuming $el is a jQuery object wrapped aroung the element you want to change):

$el[0].className = $el[0].className.replace(/^\S+/, replacementClass);

This replaces the first class of $el with replacementClass string.

Alternatively, you can use attr to do essentially the same:

$el.attr('class', function(_, cls) {
  return cls.replace(/^\S+/, replacementClass);
});

Answer 3

You can use .toggleClass() to add/remove a class or removeClass() to remove class and then use addClass() to add the new class.

Example: DOM:

<div class="a b c d"></div>

JS:

var ele = $("div.a");
ele.removeClass("a").addClass("e");
// OR
ele.toggleClass("a").addClass("e");

Answer 4

you have this:

<p class='classA classB classC'></p>

jQuery:

var classes = $('p').attr("class").split(" ");
var newClass = 'myClassEdited';
var classes[0] = newClass;
$('p').attr('class', classes.join(" "));

Edited DOM:

<p class='myClassEdited classB classC'></p>

Answer 5

You add a class in first position look at raina77ow answer and other answers. but the last class is more power than first class.

for example

class1 class2 class3 class4 class5

class5 {
   color:red
}

class1{
   color:green

}

so color red will apply for all the text class1 is not useful it is dummy

Answer 6

One further approach:

// elem: DOM Node, on which the class-name will be toggled,
// toggleClass: String, the class-name to toggle.
function prependClassToggle(elem, toggleClass) {
  // if the element currently had the passed-in class-name
  if (elem.classList.contains(toggleClass)) {
    // we remove it, using the classList API's remove() method:
    elem.classList.remove(toggleClass);
  } else {
    // otherwise we concatenate the passed-in class-name with the
    // string returned by the className property (and a space):
    elem.className = toggleClass + ' ' + elem.className;
  }
}

// document.querySelector() returns only the first element matching the selector, or null,
document.querySelector('button')
  // assigning event-handling behaviour for that <button>:
  .addEventListener('click', function() {
  // calling the function, passing in the <button>'s nextElementSibling,
  // and the string of the classname to add:
  prependClassToggle(this.nextElementSibling, 'classA');
});

div::before {
  content: attr(class);
}

<button>Toggle 'classA'</button>
<div class="classB classC classD classE classF"></div>

References:

• EventTarget.addEventListener().
• Element.classList.
• Element.className.
• Node.nextElementSibling.