Question

我有一个超过5个类的元素。我只需要在第一个位置替换类而不影响其余的类。

我不想替换所有类（我尝试过.attr（'class'，'class1 class2 class3 class4 class5'），。prop，.switchclass等）..

Answer 1

您不必为此使用jQuery：直接解决DOM Element及其className属性。例如（假设$el是一个jQuery对象，包含了你想要改变的元素）：

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

这会将第一类$el替换为replacementClass字符串。

或者，您可以使用attr执行基本相同的操作：

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

Answer 2

您可以使用.toggleClass()添加/删除课程，或使用removeClass()删除课程，然后使用addClass()添加新课程。

实施例： 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 3

你有这个：

<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(" "));

编辑DOM：

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

Answer 4

您在第一个位置添加一个类，然后查看 raina77ow答案和其他答案。但最后一堂课比一流课更强大。

例如

class1 class2 class3 class4 class5

class5 {
   color:red
}

class1{
   color:green

}

所以颜色红色将适用于所有文本class1没用，它是虚拟的

Answer 5

另一种方法：

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

参考文献：

Answer 6

这很简单。仅使用

<强> element.addClass（ 'YourClass'）;

删除任何类

<强> element.removeClass（ 'YourClass'）;

如何使用jquery在第一个位置添加一个类？

6 个答案: