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

Using JQuery to Send Form Data with an Ajax POST Request

Having trouble with localstorage.setitem function in Angular?

retrieving identifiers from a separate table for an array of values

Using jQuery to append a string to a CSS property

Halting execution: Trying to use the keyword 'import' which is not allowed here

Comparing v-show(true/false) and replaceWith: Exploring the best practice between Vue and jQuery

Troubleshooting Checkbox Problems on Internet Explorer 6

Child functional component does not refresh after its props are altered by its parent component

Send the output of MPDF back to the browser by utilizing JSON in combination with ExtJS

The user removal process is not functioning properly

Issue TS1259: The module "".../node_modules/@types/bn.js/index"" can only be imported as the default using the 'esModuleInterop' flag

Vue Checkboxes - Maintain selection unless a different checkbox is selected

The sticky menu feature in jQuery does not assign classes to elements after the page is refreshed; it will only work when scrolling is activated manually

Storing the timestamp of when a page is accessed in the database

Clicking on a new tab causes the page to quickly scroll back to the top (jQuery Tabs

encountering an issue while working with Selenium on Google Colab

Triggering a re-render in React

Linking promises together ensures that they always resolve with a result

Guide to recursively iterating through an array of objects in TypeScript/Javascript

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding