Implementing CSS counter-increment with jQuery

Question

Implementing CSS counter-increment with jQuery

Is there a way to use jQuery to set the CSS counter-increment attribute on ".demo:before" even though jQuery cannot access pseudo elements directly? I recall seeing a suggestion on Stack Overflow about using a data attribute and then referencing that value in the CSS, but it doesn't seem to be working for me. Can this actually be achieved?

Here's a simplified example to illustrate my question: http://jsfiddle.net/4h7hk8td/

HTML:

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

JS:

// 1) The user defines the unit size
var myUnit = 100;

// 2) Saving the unit size as a data attribute
$('.demo li').attr('data-unit', myUnit);

CSS:

.demo {
    counter-reset: list;
}

.demo li:before {
    /* 3) Attempting to get the data attribute with jQuery and use it as an increment - currently not functioning as intended :( */
    counter-increment: list attr(data-unit);
    content: counter(list);
}

javascript jquery css counter css-counter

Answer 1

Answer №1

If you're looking to simplify your CSS workflow, consider using a css-preprocessor for compiling the code.

For example, let's take a look at how this can be done using SCSS:

This method allows for different counter increments based on specific numbers provided. It works well when you have predetermined values for incrementing. For instance, if the values in question are 100, 200, and 300, you can use an @each loop to generate CSS for these known numbers.

If you have a general idea of the range of values being passed, you can also utilize an @for loop (especially useful with 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);
}

Check out this Working Fiddle (modify the data-num attribute value to 200 or 300)

Below is the compiled CSS output:

.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 2

If you're looking to simplify your CSS workflow, consider using a css-preprocessor for compiling the code.

For example, let's take a look at how this can be done using SCSS:

This method allows for different counter increments based on specific numbers provided. It works well when you have predetermined values for incrementing. For instance, if the values in question are 100, 200, and 300, you can use an @each loop to generate CSS for these known numbers.

If you have a general idea of the range of values being passed, you can also utilize an @for loop (especially useful with 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);
}

Check out this Working Fiddle (modify the data-num attribute value to 200 or 300)

Below is the compiled CSS output:

.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

Answer №2

For each li, the counter should be increased, not for :before. Here is a demo of how to do this: http://jsfiddle.net/7vt0kf2c/.

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

Answer 4

For each li, the counter should be increased, not for :before. Here is a demo of how to do this: http://jsfiddle.net/7vt0kf2c/.

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

Answer 5

Answer №3

Here is an alternative approach that achieves the desired outcome without using CSS:

let unitSize = 50;
$('.example').data('size', unitSize);
$('.example li').each(function () {
    $(this).text($('.example').data('size') * ($(this).index() + 1));
});

Answer 6

Here is an alternative approach that achieves the desired outcome without using CSS:

let unitSize = 50;
$('.example').data('size', unitSize);
$('.example li').each(function () {
    $(this).text($('.example').data('size') * ($(this).index() + 1));
});

Implementing CSS counter-increment with jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Experiencing unexpected behavior with React Redux in combination with Next.js and NodeJS

The "DELETE" method in ajax is malfunctioning

Ensuring the accuracy of content generated dynamically using the jQuery Validate plugin

Submitting a form in Rails without refreshing the page and dynamically updating the view

The information about the property is not appearing on the screen

Obtain the count of unique key-value pairs represented in an object

Executing Basic Authentication in Javascript through window.open()

Using JQuery selectors in conditional statements

An Easier Way to Incorporate an Image Insert Button into CKEditor

User must wait for 10 seconds before closing a JavaScript alert

Encountering a PropertyTypeError while attempting to process a payment via Stripe in conjunction with use-shopping-cart on Next.js

Tips for dynamically updating values when input numbers are modified using JavaScript

Eliminate borders for text input in Bootstrap 3 styling

What is the best way to reorganize an object's properties?

Automate brush control and transmit pertinent data through coding

Rotating Image Carousel

Encode session data for Ajax requests

The definitive method for resolving synchronization problems between Protractor and Angular

Steps to display page content only after running Java code in JSP

How can I utilize React hook to choose multiple items?