Javascript 对div中的可见元素单独编号

我有一些部分包含需要按顺序编号的框，就像一个有序列表一样（尽管遗憾的是，使用OL不是一个可接受的选项）。每个框都可以手动隐藏，在计数时需要忽略这些隐藏框

HTML:

<div class="section">
     <h1>List One</h1>
     <div class="box" style="display:none;"><!-- Ignored -->
        <span class="number"></span>
     </div>
     <div class="box">
        <span class="number"><!-- Want: 1 - Displays: 1 --></span>
     </div>
     <div class="box">
         <span class="number"><!-- Want: 2 - Displays: 2 --></span>
     </div>
</div>

<div class="section">
     <h1>List Two</h1>
     <div class="box">
        <span class="number"><!-- Want: 1 - Displays: 3 --></span>
     </div>
     <div class="box" style="display:none;"><!-- Ignored -->
        <span class="number"></span>
     </div>
     <div class="box">
        <span class="number"><!-- Want: 2 - Displays: 4 --></span>
     </div>    
</div>

第一节中的方框正确地编号为1和2，但当涉及到第二节时，它会继续编号，编号为3和4，而不是1和2。我发现这是因为

$(this).index('.box:visible')

是获取相对于页面的所有可见框的索引，那么如何仅获取相对于其父级的可见框的索引？我希望是这样的

$(this).index('.box:visible', $section)

$(function () {
    $("div.section").each(function () {
        $(this).find("div.box:visible span.number").each(function (index) {
            $(this).html(index + 1);
        });
    });

});

---

但是这不起作用。

你不能做一些类似的事情吗

$(this).index('.box:visible', $section)

$(function () {
    $("div.section").each(function () {
        $(this).find("div.box:visible span.number").each(function (index) {
            $(this).html(index + 1);
        });
    });

});

---

你不能做点像这样的事吗

$(this).index('.box:visible', $section)

$(function () {
    $("div.section").each(function () {
        $(this).find("div.box:visible span.number").each(function (index) {
            $(this).html(index + 1);
        });
    });

});