Insert a number before each div with a specific class

Question

The problem:
I've got a few divs with the same class. I want to place a number (start from 2 to --) before each div.

This is what I tried:

let optionNumber = $(".product-configure-custom-option")
              $('.product-configure-custom').each(function () {
              if ( $(this).find("div.product-configure-custom-option").length ) {
                $('' + $(optionNumber).length + '').insertBefore(optionNumber)
              } 
            });

.product-configure-custom-option{
float:right;
}



        
            Option 2
            Option 3
            Option 4
            Option 5
            Option 6
            Option 7

What I want the result to be:

Option Two
Option Three
Option Four

user_1609971 · Answer

I think you want something like this:

var start = 2;

$(document).ready(function() {
  $('.product-configure-custom-option').each(function() {
    console.log(this.innerHTML);
    this.innerHTML = start + '. ' + this.innerHTML;
    start++;
    });
});

Although the CSS needs looking at after that.

Looks something like this: https://jsfiddle.net/qzhtr80d/2/

user_6504633 · Answer

At the moment you're generating a single extra

for every

found. A more elegant way would be getting the text content of every

directly and prepend the counter there.

$(this).find("div.product-configure-custom-option")

returns an object we can use to iterate over the individual elements using a for-loop and do the changes via plain JavaScript. The child element can be queried by the .firstChild property and the actual text is accessible using .data.

Here's an example:

$('.product-configure-custom').each(function() {
  let elements = $(this).find("div.product-configure-custom-option");
  for (var a = 0; a < elements.length; a++) {
    elements[a].firstChild.data = (a + 2) + ". " + elements[a].firstChild.data;
  }
});

.product-configure-custom-option {
  display: block;
}



  
    Option 2
    Option 3
    Option 4
    Option 5
    Option 6
    Option 7

user_14201528 · Answer

let optionsContainer = $(".product-configure-custom");
optionsContainer.each(function() {
    let options = $(this).find("div.product-configure-custom-option");
    if (options.length) {
        options.each(function(index, option) {
            let startValue = 2;
            let incrementedValue = startValue + index;
            $('' + incrementedValue + '').insertBefore(option);
        });
    }
});

.product-configure-custom-option{
    float:right;
}



        
            Option 2
            Option 3
            Option 4
            Option 5
            Option 6
            Option 7

user_6567275 · Answer

Not the answer you're asking for, but you can do this in plain CSS: MDN Using CSS counters

.product-configure-custom {
  counter-set: foo 1;
}

.product-configure-custom-option::before {
  counter-increment: foo;
  content: counter(foo) ". ";
}


  
    Option 2
    Option 3
    Option 4
    Option 5
    Option 6
    Option 7

Insert a number before each div with a specific class

4 Answers