如何使用jQuery添加/删除：后类到div答案

【问题标题】：how to add / Remove :after class to div using jQuery如何使用jQuery添加/删除：后类到div
【发布时间】：2017-11-06 20:06:10
【问题描述】：

我们如何使用 jQuery 将 :after 类添加/删除到 div

假设我有以下课程

.vignetteC1:after { ... }
.vignetteC2:after { ... }
.vignetteC3:after { ... }
.vignetteC4:after { ... }
.vignetteC5:after { ... }

如果我们想使用 jQuery 将课后添加到潜水中，我们该怎么做。 ?

我用谷歌搜索了很多，但我只得到了一个 .after 函数的例子等等。

我尝试了以下方法，但它不起作用

var VignetteVal = 'vignetteC' + value + ':after';

for (var i = 1; i <= 5; i++) {
  Img.parent().removeClass(('vignetteC' + i + ':after'));
}

Img.parent().addClass(VignetteVal);

但是上面的代码添加了vignetteC2: 在类之后到div 喜欢

<div class="vignetteC2: after">

【问题讨论】：

.vignetteC1 是一个类，而 .vignetteC1:after 不是。
stackoverflow.com/questions/8968992/jquery-and-pseudo-elements
How do you add pseudo classes to elements using jQuery?的可能重复
我会在 CSS 中使用特定的类选择器预先定义 pseudo-elements，然后根据需要切换/添加/删除类，所以如果我不再需要 .vignetteC5:after，我宁愿删除类.vignetteC5。为了保留选择器的命名约定，最好将这些 pseudo-elements 分配给诸如“.pseudoEl”之类的类，然后声明您的属性，例如：.vignetteC1.psuedoEl:after、.vignetteC2.psuedoEl:after、.vignetteC3.psuedoEl:after 等。

标签： javascript jquery html css jquery-ui

【解决方案1】：

你对:after 是什么感到很困惑。这是一个伪元素。它不是一个类，也不是 DOM 结构的一部分，因此不能用 javascript 编辑或添加。

:after 伪元素在元素内容之后添加内容。它不是一门课。要在元素后添加内容，您可以使用insertAfter() 或使用append 在当前元素的末尾添加内容。另外，还有一个after() 方法

【讨论】：