使用jQuery嵌套自动编号：如何在每个标题后重置

我有以下几个部门

<div class="category">

<div class="title">

<div class="title-number">
</div>

<div class="title-name">
</div

</div>

<div class="sub">

<div class="sub-number">
</div>

<div class="sub-name">
</div

</div>

<div class="sub">

<div class="sub-number">
</div>

<div class="sub-name">
</div

</div>

<div class="sub">

<div class="sub-number">
</div>

<div class="sub-name">
</div

</div>

<div class="title">

<div class="title-number">
</div>

<div class="title-name">
</div

</div>

<div class="sub">

<div class="sub-number">
</div>

<div class="sub-name">
</div

</div>

</div>

这可以很好地为每个标题编号

我想做的是能够对每个子类别进行编号，这样上面的div就可以这样填充； 1.0（标题） 1.1（子类别） 1.2（子类别） 1.3（小类）

2.0（标题） 2.1（子类别）

等等

我尝试了各种方法来嵌套上面的.每个函数，但都不起作用。如果我尝试将外部循环的索引分配给一个变量，然后在内部循环中使用该变量，它似乎会给我列表中最后一个标题的编号，因此所有子标题编号都以28.1、28.2、28.3等开头

然后我尝试使用一些标准javascript进行循环（不建议这样做），但也无法实现

for(var i = 0; i < $('[class*=number]').length; i++){
    $(".title-number").eq(i).html(i+1);

    for(var j = 0; j < $(".sub-line").length; j++){
    $(".sub-number").eq(j).html(=i+(j/10));
    }
}

for（var i=0；i<$（'[class*=number]'）。长度；i++）{
$（“.title number”）.eq（i）.html（i+1）；
对于（var j=0；j<$（“.sub-line”）.length；j++）{
$（“.sub number”）.eq（j）.html（=i+（j/10））；
}
}

---

在某个地方，出了点问题。如有任何建议，将不胜感激。谢谢。

您当前的html结构对您帮助不大。我建议你也把标题和相应的副标题分成几个部分

<div class="category">
    <div class="section">
        <div class="title">
            <div class="title-number"></div>
            <div class="title-name">Title</div>
        </div>
        <div class="sub">
            <div class="sub-number"></div>
            <div class="sub-name">Sub</div>
        </div>
        <div class="sub">
            <div class="sub-number"></div>
            <div class="sub-name">Sub</div>
        </div>
        <div class="sub">
            <div class="sub-number"></div>
            <div class="sub-name">Sub</div>
        </div>
    </div>
    <div class="section">
        <div class="title">
            <div class="title-number"></div>
            <div class="title-name">Title</div>
        </div>
        <div class="sub">
            <div class="sub-number"></div>
            <div class="sub-name">Sub</div>
        </div>
    </div>
</div>

如果您无法更改html结构，那么这可能适用于您：

$(function() {
    $('.title-number').each(function(index) {
        $(this).html(index + 1);
        $(this).parent().nextAll('.sub').each(function(idx) {
           $(this).find('.sub-number').html((index + 1) + '.' + (idx + 1));
        });
    });
});

---

是的，在外部结构上操作而不是在更深的内部操作是有意义的，因此需要嵌套循环。

$(function() {
    $('.section').each(function(index) {
        $(this).find('.title-number').html(index + 1);
        $(this).find('.sub-number').each(function(idx) {
            $(this).html((index + 1) + '.' + (idx + 1));
        });
    });
});

$(function() {
    $('.title-number').each(function(index) {
        $(this).html(index + 1);
        $(this).parent().nextAll('.sub').each(function(idx) {
           $(this).find('.sub-number').html((index + 1) + '.' + (idx + 1));
        });
    });
});