javascript - 在具有特定类的每个 div 之前插入一个数字

Question

问题:
我有几个同级的div。我想在每个 div 之前放置一个数字(从 2 开始到 --)。

这是我尝试过的:

let optionNumber = $(".product-configure-custom-option")
              $('.product-configure-custom').each(function () {
              if ( $(this).find("div.product-configure-custom-option").length ) {
                $('<div class="title-number float-left text-center mr-2">' + $(optionNumber).length + '</div>').insertBefore(optionNumber)
              } 
            });

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
        <div class="product-configure-custom">
            <div class="product-configure-custom-option">Option 2</div>
            <div class="product-configure-custom-option">Option 3</div>
            <div class="product-configure-custom-option">Option 4</div>
            <div class="product-configure-custom-option">Option 5</div>
            <div class="product-configure-custom-option">Option 6</div>
            <div class="product-configure-custom-option">Option 7</div>
            </div>
</div>

我想要的结果是:

选项二

选项三

选项四

Answer 1

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;
            $('<div class="title-number float-left text-center mr-2">' + incrementedValue + '</div>').insertBefore(option);
        });
    }
});
        

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
        <div class="product-configure-custom">
            <div class="product-configure-custom-option">Option 2</div>
            <div class="product-configure-custom-option">Option 3</div>
            <div class="product-configure-custom-option">Option 4</div>
            <div class="product-configure-custom-option">Option 5</div>
            <div class="product-configure-custom-option">Option 6</div>
            <div class="product-configure-custom-option">Option 7</div>
            </div>
</div>