This doesn't work, but it shows you what I want to do:
$(this+":after").css('content', 'something');
Basically, I want my function to dynamically add an :after element to various matched elements.
Is there a correct way to do this?
Asked
Active
Viewed 311 times
1
emersonthis
- 32,822
- 59
- 210
- 375
-
1How come `this` are various matched elements? – Alexander Apr 18 '12 at 19:10
-
1You cannot select pseudo elements with jQuery or Javascript. – Matthew Apr 18 '12 at 19:11
-
@MatthewL Really? You can't do `$("a:hover").css('color', '#F00'); – emersonthis Apr 18 '12 at 19:13
-
@Alexander: this is the various matched elements. This line would be inside another function. – emersonthis Apr 18 '12 at 19:14
-
$(this) is a jQuery object and you cannot combine it with selectors or pseudo-selectors in that way. – Jay Blanchard Apr 18 '12 at 19:14
-
The $('a:hover') would become an object @Emerson – Jay Blanchard Apr 18 '12 at 19:15
-
What, exactly, are you trying to do? You have complex selectors in jQuery for ancestors, siblings, descendants, etc. There is an elegant solution to your problem, but more context is needed. – Joe Apr 18 '12 at 19:16
-
possible duplicate of [Manipulating CSS :before and :after pseudo-elements using jQuery](http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery) – BoltClock Apr 18 '12 at 19:22
2 Answers
3
You cannot use the pseudo-elements :after and :before in JavaScript (and jQuery is JavaScript, too!).
However, you can simply .append() something:
$(this).append('something');
If that's not what you want, you could put this in your CSS:
something:after { content: attr(data-after); }
Then you can use .attr('data-after', 'whatever') to modify the text used in the :after "element". Note that you cannot use .data('after', 'whatever') as it only reads attributes but never sets them.
ThiefMaster
- 310,957
- 84
- 592
- 636
3
$(this).after('content'); is what you're looking for
Jay Blanchard
- 34,243
- 16
- 77
- 119
-
This places the content after the element, but not within it, so it works completely differently from using an `:after` pseudo-element. – BoltClock Apr 18 '12 at 19:41
-
That is true, but it is unclear from the OP's statement exactly what he wants to do. If he wants it within the element we can cover that too. – Jay Blanchard Apr 18 '12 at 19:42
-
I am trying to replicate the behavior of the css :after, so inside would be better. If it helps, what I'm actually trying to do is place the new element "behind" the original one. – emersonthis Apr 18 '12 at 20:18
-
$(this).appendTo('content'); will be what you want then as this applies the 'content' inside. – Jay Blanchard Apr 18 '12 at 20:26