javascript 如何选择：使用jquery的元素之后
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14001350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to select :after element using jquery
提问by xman
Bellow is my codes.what i have tried.when this popup appear i want to use this close button to close entire popbox.
波纹管是我的代码。我已经试过了。当这个弹出窗口出现时，我想使用这个关闭按钮来关闭整个弹出框。
CSS code
CSS代码
.bigdiv{
display:none;
background-color:#efefef;
box-shadow: 10px 10px 10px 100000px rgba(0, 0, 0, 0.4);
border:2px solid #efefef;
width:400px;
height:300px;
position:fixed;
z-index:500;
top:25%;
left:25%;
margin:0 auto;
padding:20px;
}
.bigdiv:after {
cursor:pointer;
content:url('http://static.doers.lk/img/closebox.png');
position: relative;
right: -195px;
top: -310px;
z-index: 999;
}
JQUERY
查询
$(".left div").click(function () {
$(".bigdiv").show("slow");
$(".bigdiv").click(function () {
$(".bigdiv").hide();
}) ; }) ;
HTML
HTML
<div class="left">
<div>intro text here</div><div></div><div></div>
</div>
<div class="bigdiv">some content</div>
I want to select :after elements .how to do that using jquery ?
我想选择 :after 元素。如何使用 jquery 做到这一点？
采纳答案by T.J. Crowder
I want to select :after elements .how to do that using jquery ?
我想选择 :after 元素。如何使用 jquery 做到这一点？
You can't, generated pseudo-elements don't exist in the DOM (yet, sadly).
你不能，生成的伪元素不存在于 DOM 中（但遗憾的是）。
We can prove this like so:
我们可以这样证明：
CSS:
CSS：
#foo:before {
content: '[Before]'
}
#foo:after {
content: '[After]'
}
HTML:
HTML：
<body><div id="foo">Foo</div></body>
JavaScript:
JavaScript：
(function() {
var msgs = [];
var child;
var div;
for (child = document.body.firstChild;
child;
child = child.nextSibling) {
if (child.id) {
msgs.push("Child " + child.nodeName + "#" + child.id);
}
else {
msgs.push("Child " + child.nodeName);
}
}
div = document.createElement('div');
div.innerHTML = msgs.join("<br>");
document.body.appendChild(div);
})();
The page resulting from the above (if we assume the scriptelement is added to bodyat the end) is:
上面产生的页面（如果我们假设script元素被添加到body最后）是：
[Before]Foo[After] Child DIV#foo Child SCRIPT
As you can see, the generated pseudo-elements are just not present at all as far as the DOM is concerned.
如您所见，就 DOM 而言，生成的伪元素根本不存在。
回答by Chris
You can use the getComputedStyle function, which is supported by most major browsers - IE9,IE10,Chrome,FF. I have not found a way to do this in IE8 though.
您可以使用大多数主流浏览器 - IE9、IE10、Chrome、FF 都支持的 getComputedStyle 函数。不过，我还没有找到在 IE8 中执行此操作的方法。
var attrContent = getComputedStyle(this,':after').content;
var attrWidth = getComputedStyle(this,':after').width;
If you find this function is undefined try window.getComputedStyle instead.
如果您发现此函数未定义，请尝试使用 window.getComputedStyle。
回答by mikel
Unfortunately, you can't select pseudo-elements in jQuery (or JavaScript in general).
不幸的是，您不能在 jQuery（或一般的 JavaScript）中选择伪元素。
jQuery's appendTo()method works exactly like CSS :afterthough, so it might work as a replacement (albeit not so elegant as pure CSS solution).
jQuery 的appendTo()方法与 CSS 完全一样:after，所以它可以作为替代品（虽然不如纯 CSS 解决方案那么优雅）。
e.g instead of:
例如，而不是：
.bigdiv:after {
cursor:pointer;
content:url('http://static.doers.lk/img/closebox.png');
position: relative;
right: -195px;
top: -310px;
z-index: 999;
}
Try it like this
像这样试试
CSS:
CSS：
.bigdivAfter {
cursor:pointer;
position: relative;
right: -195px;
top: -310px;
z-index: 999;
}
JS:
JS：
$("<div class=bigdivAfter><img src='http://static.doers.lk/img/closebox.png'></div>").appendTo(".bigdiv");
And then you can select the closebox image as normal.
然后您可以正常选择 closebox 图像。
回答by Sudhanshu Yadav
you can use jquery to append close button and can assign an close event to it. This jquery and css will work for you.
您可以使用 jquery 附加关闭按钮并可以为其分配关闭事件。这个 jquery 和 css 会为你工作。
CSS
CSS
.bigdivAfter {
cursor:pointer;
position: absolute;
right: //as you want;
top: //as you want;
z-index: 999;
}
JQUERY
查询
$(document).ready(function(){
$(".bigdiv").append('<img class="closeButton" src="http://static.doers.lk/img/closebox.png"/>');
$(".bigdiv .closeButton").click(function () {
$(".bigdiv").hide();
}) ;
$(".left div").click(function () {
$(".bigdiv").show("slow");
}) ;
I will also suggest you to add image on html itself instead of adding it trough jquery
我还建议您在 html 本身上添加图像，而不是通过 jquery 添加它
