this:after selector jQuery

Question

$('.email').each(function(l,i){
    var that = $(this);
    var thatOtherOne = $(this:after);
    $('<a>').attr('href', 'mailto: '+ that.html + thatOtherOne.css('content')).insertAfter(that);
    that.hide();
});

.email:after {
    content: "@mydomain.com";
}

<span class="email">info</span>

Hello again Stackoverflow!

This is my method against spam. Using CSS the :after selector and content I try fill my custom email in inside the <span> and the css adds the url. This doesn't make it clickable though, so that's why I try the above method using JS/jQuery.

This sadly doesn't work because $(this:after); is not a valid selector. How can I change this?

I'm not sure what you're trying to accomplish with `this:after`. Could you elaborate or provide some examples? — DevlshOne, Aug 11 '13 at 22:36
@Dave not if he's trying to manipulate the "content" property of his ":after" stuff. — Pointy, Aug 11 '13 at 22:38
oh right. Yeah I don't know if JavaScript can do that. Just change the actual content. — Dave, Aug 11 '13 at 22:39
Not particularly relevant but I would suggest choosing better and more specific variable names than `that` and `thatOtherOne`... — aug, Aug 11 '13 at 22:39
@DevlshOne exactly what pointy said, I'm trying to get the stuff from the "content" css property. — Thew, Aug 11 '13 at 22:39
possible duplicate of [Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after) — Dave, Aug 11 '13 at 22:39
@Dave There's a small problem though. That "duplicate" adds another selector to your `this` using classes. You will not know if that selector(class) might be another `this`, since there are multiple email adresses on the page. (Sorry if that wasn't clear). — Thew, Aug 11 '13 at 22:42
@Thew http://stackoverflow.com/a/11354393 and http://stackoverflow.com/a/8969048 — Jonathan Lonowski, Aug 11 '13 at 22:42
Possible duplicate of http://stackoverflow.com/questions/483212/effective-method-to-hide-email-from-spam-bots — woofmeow, Aug 11 '13 at 22:49
I was trying to look at the functional aspect of it ... that way seems it is . — woofmeow, Aug 11 '13 at 22:56

score 3 · Accepted Answer · answered Aug 11 '13 at 22:42

3

You simply cannot construct a selector like that; it really doesn't make syntactic sense. Selectors are for searching through the DOM. To do what you're trying to do, you can try using the attr() trick in your "content":

.email:after {
  content: attr(data-domain);
}

Then in your markup:

  <a class=email data-domain='@whatever.com'>info</a>

And your JavaScript can then do this:

$('.email').each(function(l,i){
    var that = $(this);
    var domain = that.data('domain');
    $('<a>').prop('href', 'mailto: ' + that.text() + domain).insertAfter(that);
    that.hide();
});

The idea is to keep stuff that your code actually needs to use in a separate attribute, and then use the attr() operator (or whatever you want to call it) in the CSS rule to get that attribute value and use it as content. The operator can be combined with strings if you like. Chris Coyier has a good blog post about it.

answered Aug 11 '13 at 22:42

Pointy

405,095
59
585
614

+1 for explenation, code examples, and letting me know that :before and :after aren't parts of the DOM. – Thew Aug 11 '13 at 22:47
1

Note that adding the `@` in `data-domain` is something wich some bot might index, making it smarter to add the `@` in the javascript code. Example: `'mailto: ' + that.text() + '@' + domain` -- Also note that it this does not add any text to the links, making them invincible. Add `.html([your text/code])` to the element. – Thew Aug 11 '13 at 22:55
lol it is absolutely hilarious you can do something like this with css – Esailija Aug 11 '13 at 23:04

this:after selector jQuery

1 Answers1