使用 javascript 循环将文本编号到现有列表元素

Question

我想向现有的列表elemensts发送数字。 例如：

我有这样的元素。我在应用程序中创建了不同的列表项。但是我有有序的文本数字。

<div class="section-01">
    <ul class="numbers-wrap">
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    </ul>
    <ul class="numbers-wrap">
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    </ul>
    <ul class="numbers-wrap">
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    </ul>
    </div>
    <div class="section-02">
    <ul class="numbers-wrap">
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    </ul>
    <ul class="numbers-wrap">
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    </ul>
    <ul class="numbers-wrap">
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    <li class="numbers-li"></li>
    </ul>
    </div>

我想像这样有序地将数字添加到所有列表 （.numbers-li） 中：

结果应该是这样的

<div class="section-01">
        <ul class="numbers-wrap">
        <li class="numbers-li">1</li>
        <li class="numbers-li">2</li>
        <li class="numbers-li">3</li>
        </ul>
        <ul class="numbers-wrap">
        <li class="numbers-li">4</li>
        <li class="numbers-li">5</li>
        </ul>
        <ul class="numbers-wrap">
        <li class="numbers-li">6</li>
        <li class="numbers-li">7</li>
        <li class="numbers-li">8</li>
        </ul>
        </div>
        <div class="section-02">
        <ul class="numbers-wrap">
        <li class="numbers-li">9</li>
        <li class="numbers-li">10</li>
        <li class="numbers-li">11</li>
        <li class="numbers-li">12</li>
        </ul>
        <ul class="numbers-wrap">
        <li class="numbers-li">13</li>
        <li class="numbers-li">14</li>
        <li class="numbers-li">15</li>
        </ul>
        <ul class="numbers-wrap">
        <li class="numbers-li">16</li>
        <li class="numbers-li">17</li>
        <li class="numbers-li">18</li>
        </ul>
        </div>   

另外，请让我知道如何仅将奇数文本放入其中

Answer 1

尝试如下：

$(document).ready(function(){
    $('li').each(function(index){
        $(this).text(parseInt(index,10)+ 1);
    })
});

注意：这里也可以使用$(this).text(parseInt(index)+ 1)，但是在使用parseInt时应始终使用base value，否则可能会导致一些不希望的结果。

Answer 2

试试这个

$('.numbers-li').each(function(index){
    $(this).text(parseInt(index,10) + 1);
})

更新（对于奇数，可用于通过更改奇数 = 2 来打印偶数）

var oddnum = 1;
$('.numbers-li').each(function(index){
    $(this).text(oddnum);
    oddnum = oddnum + 2;
})