CSS-Zählerinkrement über jQuery setzen

Question

Ich möchte das CSS Counter-Inkrement Attribut auf ".demo:before" mit jQuery festlegen.

Das Problem ist, dass jQuery auf ein Pseudoelement nicht zugreifen kann. Ein anderer S.O. antwort (was ich jetzt nicht finden kann) schlug vor, ein datenattribut zu setzen und diesen wert dann in der CSS zu verwenden, aber das funktioniert auch nicht. Ist das etwas, das erreicht werden kann?

Vereinfachtes Beispiel: 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); 
} 

Answer 1

Erhöhen Sie den Zähler für jede li und nicht :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);  
}); 

Answer 2

Sie können tatsächlich einen CSS-Präprozessor verwenden, um die CSS zu kompilieren.

ich ein Beispiel unter Verwendung von SCSS geben werde:

Es tatsächlich verschiedene Zählerinkrementierungen für die übergebenen Zahlen macht. Diese Lösung funktioniert, wenn Sie die Werte kennen, die zum Erhöhen verwendet werden. Wenn die übergebenen Werte beispielsweise 100, 200 und 300 sind, können Sie @each loop verwenden, um CSS für diese bekannten Zahlen zu kompilieren.

Wenn Sie zumindest wissen, wie viele Werte übergeben werden, können Sie @for loop (verwenden, wenn begrenzte Nummern vorhanden sind).

$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 (Änderung des data-num Attributwert auf 200 oder 300)

Hier ist die kompilierte 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); 
} 

Answer 3

die akzeptierte Antwort, im Grunde den gleichen Netto-Effekt ohne CSS :

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