Set CSS counter-increment via jQuery

Question

I want to set the CSS counter-increment attribute on ".demo:before" using jQuery.

The problem is jQuery cannot access a pseudo element. Another S.O. answer (which I can't seem to find now) suggested setting a data-attribute, and then using that value within the CSS, but that isn't working either. Is this something that can be accomplished?

Simplified Example: http://jsfiddle.net/4h7hk8td/

HTML:

<ul class="demo">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

JS:

// 1) User Sets Unit Size
var myUnit = 100;

// 2) Unit size is saved via data attribute
$('.demo li').attr('data-unit', myUnit);

CSS:

.demo {
    counter-reset: list;
}

.demo li:before {
    /* 3) CSS gets data attribute and applies as the increment. Not working :( */
    counter-increment: list attr(data-unit);
    content: counter(list);
}

hm... If you're using data attributes, is it possible to use `content: attr(data-unit)` and completely skip the counter part? http://jsfiddle.net/jmarikle/js6gzt5q/. — Joseph Marikle, Jul 10 '15 at 16:10
Fun fact: if it wasn't for the fact that [CSS3 attr() isn't supported anywhere](http://stackoverflow.com/questions/8769786/css3s-attr-doesnt-work-in-major-browsers/8769922#8769922), you would in fact be able to write `counter-increment: list attr(data-unit integer);` and it would just work. — BoltClock, Jul 10 '15 at 16:14
Yep, I could do that if that's the only way. I just have a thing that's already built using the css counters, so I was hoping I could just modify what was already there. — kthornbloom, Jul 10 '15 at 16:15
You may be thinking of [this question](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin). There are other answers that suggest writing CSS directly from a script, which works as a last resort (short of setting `content` directly and forgoing counters altogether). — BoltClock, Jul 10 '15 at 16:20

Mr_Green · Answer 1 · 2015-07-10T18:16:06.353

You can actually use a css-preprocessor to compile the css.

I am giving an example below using scss:

It actually renders different counter increments for the passed numbers. This solution will work if you already know the values which are being used to increment. For example, if the values being passed are 100, 200 and 300, then you can use @each loop to compile css for those known numbers.

If you are atleast aware of range of values being passed, you can use @for loop (use it when there are limited numbers).

$values: 100, 200, 300;
@each $i in $values {
  .demo[data-num="#{$i}"]{
    & > li::before{
      counter-increment: list #{$i};
    }
  }
}

.demo {
    counter-reset: list;
}

.demo li:before {
    content: counter(list);
}

Working Fiddle (change the data-num attribute value to 200 or 300)

Here is the compiled css:

.demo[data-num="100"] > li::before {
  counter-increment: list 100;
}

.demo[data-num="200"] > li::before {
  counter-increment: list 200;
}

.demo[data-num="300"] > li::before {
  counter-increment: list 300;
}

.demo {
  counter-reset: list;
}

.demo li:before {
  content: counter(list);
}

score 1 · Accepted Answer · answered Jul 10 '15 at 16:55

1

Increment the counter for each li and not :before: http://jsfiddle.net/7vt0kf2c/.

var myUnit = 100;
$(".demo li").css("counter-increment", "list " + myUnit);
$("button").click(function(e) {
    $(".demo li").css("counter-increment", "list " + 200);    
});

answered Jul 10 '15 at 16:55

DRD

5,557
14
14

Although this isn't actually what I asked for, my question doesn't seem to have a good answer. Since this is a better way to attack the problem, I'm accepting this as the answer. – kthornbloom Jul 10 '15 at 17:04

score -1 · Answer 3 · answered Jul 10 '15 at 18:17

-1

Given the accepted answer, basically the same net effect without CSS:

var myUnit = 100;
$('.demo').data('unit', myUnit);
$('.demo li').each(function () {
    $(this).text($('.demo').data('unit') * ($(this).index() + 1));
});

answered Jul 10 '15 at 18:17

Mark Schultheiss

32,614
12
69
100

Set CSS counter-increment via jQuery

3 Answers3