如何选择：元素后使用jquery

Question

贝娄是我的代码。我尝试过。当弹出这个弹出窗口时，我想用这个关闭按钮来关闭整个popbox。

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

<div class="left">
<div>intro text here</div><div></div><div></div>
</div>


<div class="bigdiv">some content</div>

我想选择：在元素之后。如何使用jquery做到这一点？

Answer 1

我想选择：在元素之后。如何使用jquery做到这一点？

你不能，DOM中不存在生成的伪元素（但遗憾的是）。

我们可以证明这样：

CSS：

#foo:before {
  content: '[Before]'
}
#foo:after {
  content: '[After]'
}

HTML：

<body><div id="foo">Foo</div></body>

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);

})();

上面得到的页面（如果我们假设script元素最后添加到body ）是：

[Before]Foo[After]
Child DIV#foo
Child SCRIPT

实时复制 | 资源

如您所见，就DOM而言，生成的伪元素根本不存在。

Answer 2

您可以使用getComputedStyle函数，该函数受大多数主流浏览器支持 - IE9，IE10，Chrome，FF。 我没有找到在IE8中这样做的方法。

var attrContent = getComputedStyle(this,':after').content;
var attrWidth = getComputedStyle(this,':after').width;

如果您发现此函数未定义，请尝试使用window.getComputedStyle。

Answer 3

不幸的是，你不能在jQuery（或一般的JavaScript）中选择伪元素。

jQuery的appendTo()方法与CSS完全相同:after ，它可以作为替代品（虽然不如纯CSS解决方案那么优雅）。

例如，而不是：

.bigdiv:after {
    cursor:pointer;
    content:url('http://static.doers.lk/img/closebox.png');
    position: relative;
    right: -195px;
    top: -310px;
    z-index: 999;
}

试试吧

CSS：

.bigdivAfter {
    cursor:pointer;
    position: relative;
    right: -195px;
    top: -310px;
    z-index: 999;
}

JS：

$("<div class=bigdivAfter><img src='http://static.doers.lk/img/closebox.png'></div>").appendTo(".bigdiv");

然后您可以正常选择密码箱图像。

Answer 4

你可以使用jquery追加关闭按钮，并可以为它分配一个关闭事件。 这个jquery和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");
}) ;

我还建议你在html上添加图像，而不是通过jquery添加它

如何选择：元素后使用jquery

问题描述

4 个解决方案

解决方案1
12 已采纳 2012-12-22 08:44:43

解决方案2
2 2013-11-09 23:42:48

解决方案3
0 2012-12-22 08:47:08

解决方案4
0 2012-12-22 10:02:40

如何选择：元素后使用jquery

问题描述

4 个解决方案

解决方案1 12 已采纳 2012-12-22 08:44:43

解决方案2 2 2013-11-09 23:42:48

解决方案3 0 2012-12-22 08:47:08

解决方案4 0 2012-12-22 10:02:40

解决方案1
12 已采纳 2012-12-22 08:44:43

解决方案2
2 2013-11-09 23:42:48

解决方案3
0 2012-12-22 08:47:08

解决方案4
0 2012-12-22 10:02:40