JQuery选择伪元素:after

Question

我想选择伪元素 :after

这是我的css:

show-more:after
{
    content : (" > ");
}

JQuery 码

$(function(){
    $('.show-more:after').click(function() {
        alert("Yes");
    }); 
});

Answer 1

您可以绑定到它们的父元素,但这对于伪元素是不可能的:那些根本不是DOM的一部分,因此您不能将任何事件直接绑定到它们.

对不起,问候,

网址: :after

编辑:

实际上是可能的:抱歉.

这里是一个JSFiddle:Demo链接的 URL

Answer 2

编辑、更新

尝试

(function($) {
  jQuery.fn.extend({
    getPseudo: function(pseudo, prop) {
      var props = window.getComputedStyle(
        $(this).get(0), pseudo
      ).getPropertyValue(prop);
      return String(props);
    },
    setPseudo: function(_pseudo, _prop, newprop) {
      var elem = $(this);
      var s = $("style");
      var p = elem.getPseudo(_pseudo, _prop);
      var r = p !== "" ? new RegExp(p) : false;
      var selector = $.map(elem, function(val, key) {
        return [val.tagName
                , val.id 
                  ? "#" + val.id : null
                , val.className ? "." + val.className : null]
      });
      var _setProp = "\n" + selector.join("")
        .toLowerCase()
        .concat(_pseudo)
        .concat("{")
        .concat(_prop + ":")
        .concat(newprop + "};");
      return ((!!r ? r.test($(s).text()) : r) 
              ? $(s).text(function(index, prop) {
                  return prop.replace(r, newprop)
                }) 
              : $(s).append(_setProp)
      );
    }
  })
})(jQuery);

例如，初始css：

.show-more:after {
    content : ' > ';
}

设置pseudo元素

$(".show-more-after").on("click", function() {
  $(this).setPseudo(":after", "content", "'123'")
})

github伪.js

(function($) {
  jQuery.fn.extend({
    getPseudo: function(pseudo, prop) {
      var props = window.getComputedStyle(
        $(this).get(0), pseudo
      ).getPropertyValue(prop);
      return String(props);
    },
    setPseudo: function(_pseudo, _prop, newprop) {
      var elem = $(this);
      var s = $("style");
      var p = elem.getPseudo(_pseudo, _prop);
      var r = p !== "" ? new RegExp(p) : false;
      var selector = $.map(elem, function(val, key) {
        return [val.tagName
                , val.id 
                  ? "#" + val.id : null
                , val.className ? "." + val.className : null]
      });
      var _setProp = "\n" + selector.join("")
        .toLowerCase()
        .concat(_pseudo)
        .concat("{")
        .concat(_prop + ":")
        .concat(newprop + "};");
      return ((!!r ? r.test($(s).text()) : r) 
              ? $(s).text(function(index, prop) {
                  return prop.replace(r, newprop)
                }) 
              : $(s).append(_setProp)
      );
    }
  })
})(jQuery);

.show-more:after {
    content : ' > ';
}

$(".show-more-after").on("click", function() {
  $(this).setPseudo(":after", "content", "'123'")
})