add css to a pseudo element of jQuery object that already stored in variable

Question

Here is the issue. I got a js class like so :

Code #1
1| function clNumberField(opts) {
2|   var numberField = $("<input>", opts);
3|   numberField.keydown(function (e) {
4|            /*some method to make sure that only digits are input
5|             i have it in place and this one works*/
6| }

Now I'm trying to use a decorator pattern function that must add a behavior to already stored jQuery element . The behavior is applied to a pseudo element of this field like so:

Code #2
1| function setLabel(inptFld){
2|     var v = inptFld;
3|     var v_w_lbl = inptFld.addClass(":before");
4|     v_w_lbl.css("content","Here goes only numbers");
5| }

And then upon $(document).ready i'm doing the following steps:

Code #3
1| $(document).ready(function () {
1|     var num_fld = new clNumberField({id:"some_id",value: "numbers here"});
1|     setLabel(num_fld);
1|     $("cons").append(num_fld);
1| })

And it wont append the :before styling. Probably I miss some trick in achieving the right selection in line 3 of listed Code #2.

Surfed the web for quite a while now (about an hour I think). Any practical tricks you can offer are appreciated,

`inptFld.addClass(":before");` return `inptFld`, so after you add to input style — Grundy, Oct 03 '14 at 10:45
possible duplicate of [Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after) — Grundy, Oct 03 '14 at 10:47

Guffa · Accepted Answer · 2014-10-03T15:27:36.840

1

You don't return the element from the clNumberField function, so num_fld in your ready handler will be underfined.

Add a return statement at the end of the function:

function clNumberField(opts) {
  var numberField = $("<input>", opts);
  numberField.keydown(function (e) {
           /*some method to make sure that only digits are input
            i have it in place and this one works*/
  });
  return numberField;
}

Then, what you are trying to do in the setLabel function is not possible. You can't use the :before pseudo class in an inline style, you need to use it in a style sheet. For example putting this in your style sheet:

.InputLabel:before { content: 'Here goes only numbers' }

Then add that class to the element:

function setLabel(inptFld){
  inptFld.addClass("InputLabel");
}

edited Oct 03 '14 at 15:27

answered Oct 03 '14 at 10:48

Guffa

687,336
108
737
1,005

Yeah... 'bout that return numberField. Originally this function clNumberField looks like this: http://rextester.com/SHED74325 . It appears that when I cleaned the the code a bit to shorten the unnecessary things I've deleted this row too. Fixing it in the place. So still it doesn't work – Ryu Akira Kenshin Yuki Oct 03 '14 at 11:53
@RyuAkiraKenshinYuki: That's because using pseudo classes in inline styles is not possible. I outlined an alternative above. – Guffa Oct 03 '14 at 15:28
Thx mate! I guess that's the only way to do it, some why haven't thought about that one! – Ryu Akira Kenshin Yuki Oct 04 '14 at 13:43

add css to a pseudo element of jQuery object that already stored in variable

1 Answers1