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

【问题标题】：how to add a class at first position using jquery?如何使用 jquery 在第一个位置添加一个类？
【发布时间】：2014-11-26 07:15:45
【问题描述】：

我有一个包含 5 个以上类的元素。我只需要替换第一个位置的类而不影响其余部分..

我不想替换所有类（我尝试过使用 .attr('class','class1 class2 class3 class4 class5') 、 .prop 、 .switchclass 等）..

【问题讨论】：

为什么在类名列表中插入新的关闭位置很重要？
我正在使用 jquery 验证引擎和 select2.js.. 验证引擎仅在类位于首位时才有效

标签： jquery jquery-validation-engine

【解决方案1】：

您不必为此使用 jQuery：只需直接寻址 DOM 元素及其 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);
});

【讨论】：

【解决方案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");

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

另一种方法：

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

参考资料：

【讨论】：

【解决方案5】：

您在第一位置添加一个类，请查看 raina77ow 答案和其他答案。但是最后一类比第一类更有力量。

例如

class1 class2 class3 class4 class5

class5 {
   color:red
}

class1{
   color:green

}

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

【讨论】：

【解决方案6】：

它非常简单。只使用

element.addClass('YourClass');

用于删除任何类

element.removeClass('YourClass');

【讨论】：