jQuery：如何选择所有具有：before 或 :after 的伪元素元素？

Question

在 jQuery 或基本 javascript 中是否可以使用 :after 或 :before 伪元素获取所有元素？

我知道 getcomputedstyle，但这会返回所有带有或不带 :before 或 :after 伪元素的元素。

谢谢

编辑：

类似：

$("a:before").each(function () {
  console.log("element with :before pseudo-element")
}); 

Answer 1

不。生成的内容元素实际上并不是 DOM 的一部分。您不能使用 JS 直接挂钩它们。它们仅用于演示。

您可以对可能是伪元素的父级或兄弟级等的实际元素执行操作，并以这种方式更改它们。

查看下面链接到的问题 BoltClock，也许您可​​以为所有伪元素设置一个通用属性，然后尝试根据此属性使用 jquery 选择它们。

Answer 2

给你想要的'a'标签选择一个类，比如'has-before'并以这种方式连接它们？

Answer 3

这是可能的，但需要绕道而行！

查看此演示：http://jsfiddle.net/BE47z/1/

逻辑如下：

1. 枚举所有在 CSS 中具有 :before 或 :after 定义的类 - 这是通过遍历 document.styleSheets 对象来完成的（您可以更改代码以仅捕获 :before 或 :after等等……根据需要）
2. 获得类列表后，删除 : 它在 CSS 中的名称之后的部分，例如：.a:before 变为 .a
3. 现在您可以获得与这些类匹配的所有元素

代码

HTML

<div class="element classWithoutBefore">No :before</div>
<div class="element classWithBefore">Has :before</div>
<div class="element class2WithBefore">Has :before</div>
<div class="element class2WithoutBefore">No :before</div>

CSS

.classWithoutBefore {

}

.class2WithoutBefore {

}

.classWithBefore:before {

}

.class2WithBefore:before {

}

.a:before, .b:before {

}

JS

var sheets = document.styleSheets;
var pseudoClasses = [], i = 0, j = 0;
for (i=0; i<sheets.length; i++) {
    try {
        var rules = sheets[i].cssRules;
        for (j=0; j<rules.length; j++) {
            if(rules[j].selectorText.indexOf(':before') != -1 || rules[j].selectorText.indexOf(':after') != -1) {
                pseudoClasses.push(rules[j].selectorText);
            }
        }
    }
    catch(ex) { // will throw security exception for style sheets loaded from external domains
    }
}

var classes = [];
if(pseudoClasses.length > 0) {
    pseudoClasses = pseudoClasses.join(',').split(','); // quick & dirty way to seperate individual class names
    for (i=0; i<pseudoClasses.length; i++) { // remove all class names without a : in it
        var colonPos = pseudoClasses[i].indexOf(':');
        if(colonPos != -1) {
            classes.push(pseudoClasses[i].substring(0, colonPos));
        }
    }
}

// Elements with the classes in the 'classes' array have a :before or :after defined