javascript - 向元素添加另一个类，但作为第一个类

Question

我想向一个元素添加另一个类，但是其中一些元素已经有一个现有的类，但是我要添加的类我希望它被first class添加到类字段中并且不想附加它；因为据我所知，一般来说，最后列出的类中的规则将覆盖前类中的规则，对！？

我知道一个jquery方法如下..

$("p").addClass("myClass");

但是据我了解，这只是附加类，您无法选择放置它的位置。

有什么方法可以轻松做到这一点，还是我必须开始删除类并重新添加它们？

Answer 1

不确定是否需要做这样的事情，我个人喜欢@bwoebi 的建议只是改变特异性。

但是，如果您需要它，这可能会有所帮助

HTML

<div class="second">Lorem text</div>

jQuery

var $div = $('div'),
    classes = $div.attr('class');
$div.attr('class', 'first' + ' ' + classes);

您可以将包含类名的变量替换为'first'

演示

Answer 2

只是为了好玩，以防您想在当前类中的特定索引处添加新类：

http://jsfiddle.net/ckzVk/

function addClassAtIndex(elementId,classNameToAdd,index){
    var element = document.getElementById(elementId);
    var elementClasses = element.className.split(" ");
    elementClasses.splice(index,0,classNameToAdd);
    var newClasses = elementClasses.join(" ");
    element.className = newClasses;
}

将类“man”添加到 div：

<div id="stuff" class="cool bro sweet">The div.</div>

JS：

addClassAtIndex("stuff","man",1");

结果：

<div id="stuff" class="cool man bro sweet">The div.</div>

Answer 3

您只需使用空格分隔类即可将多个类添加到一个元素。例如：

<p class="key_paragraph dark no_border">Your text here</p>
<p class="key_paragraph dark">Your text here</p>

html 属性中列出的类的顺序无关紧要。重要的是样式表。

在您的样式表（css 文件）中，如果您希望任何类覆盖另一个类，您可以更改样式表中规则的顺序。例如，如果类 'dark' 有边框而类 'no_border' 没有，则必须在样式表中的 'dark' 之后放置 'no_border' 以确保第一段的 'no_border' 覆盖 'dark'。像这样：

.dark {
    border: 2px solid red;
}

.no_border {
    border: none;
}

其次，无论css规则的顺序如何，您都可以添加特异性。例如，将类组合为“如果一个元素具有深色和红色类”比上述两个规则中的任何一个都更具体。有关特异性的更多信息，请参见此处。因此，以下规则将确保具有 'dark' 和 'no_border' 类的元素没有边框，无论它们在 stlesheet 上出现的顺序如何：

.dark.no_border {
    border: none;
}

.dark {
    border: 2px solid red;
}

第三种选择是使用 css :not 选择器来定位所有具有类 'dark' 且不具有类 'no_border' 的元素。同样，样式表中规则的顺序在这里并不重要。这是按如下方式完成的：

.no_border {
    border: none;
}

.dark:not(.no_border) {
    border: 2px solid red;
}

还有其他方法可以做到这一点，但希望我以您可以理解的方式解释了三种简单的方法。这里有一个更特定于 jquery 的演示（参见第三个示例）。如果您有任何问题，请告诉我。