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

jQuery: how to select all elements that are pseudo-elements having :before or :after?

本文关键字：before 元素 after 何选择 选择 jQuery      更新时间：2023-09-26

在jQuery或基本javascript中可以获得所有带有：after或：before伪元素的元素？

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

感谢

编辑：

类似于：

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

没有。生成的内容元素实际上并不是DOM的一部分。你不能使用JS直接钩住它们。它们仅供演示。

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

看看下面链接到的BoltClocks问题，也许你可以为所有伪元素设置一个公共属性，然后尝试根据这个属性使用jquery来选择它们。

给想要选择类（如"has before"）的"a"标记，并以这种方式挂接它们？

这是可能的，但要全面解决！

查看此演示：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
相关文章：