这：在选择器 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>

你好 Stackoverflow！

这是我对付垃圾邮件的方法。使用 CSS :after 选择器和 content 我尝试在 <span> 中填写我的自定义电子邮件，然后 css 添加 url。但这并不能使其可点击，所以这就是我使用 JS/jQuery 尝试上述方法的原因。

很遗憾，这不起作用，因为$(this:after); 不是有效的选择器。我该如何更改？

Answer 1

您根本无法构建这样的选择器；它真的没有语法意义。选择器用于在 DOM 中进行搜索。要做你想做的事，你可以尝试在你的“内容”中使用attr()技巧：

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

然后在您的标记中：

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

然后你的 JavaScript 就可以这样做了：

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

这个想法是把你的代码真正需要使用的东西保存在一个单独的属性中，然后在 CSS 规则中使用attr() 运算符（或任何你想调用的）来获取该属性值并将其用作内容。如果您愿意，可以将运算符与字符串组合。克里斯·科伊尔has a good blog post about it.