如何使用jQuery添加/删除：课后到div

Question

How to can we add/Remove :after class to div using jQuery

let say I have following class

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

if we want to add after class to a dive using jQuery how can we do so. ?

I have googled a lot but I am only getting an example of .after function and so on.

I have tried the following but it not working

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

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

Img.parent().addClass(VignetteVal);

But the above code add vignetteC2: after class to div like

<div class="vignetteC2: after">

Answer 1

You are very confused about what :after is. It's a pseudo-element. It is NOT a class and not part of the DOM structure so it cannot be edited or added with javascript.

Read more here > https://www.w3schools.com/css/css_pseudo_elements.asp

:after pseudo-element adds content after the content of an element. It is not a class. To add content after an element you can use insertAfter() or you can use append to add content at the end of the current element. Also, there is an after() method

• insertAfter()

• append()

• after()