javascript - 单独编号 div 中的可见元素

Question

我有一些部分包含需要按顺序编号的框，就像有序列表一样（但遗憾的是，使用 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>

代码：

        $('.section').each(function(){

            var $section = $(this);

            $('.box:visible',this).each(function(){

                $('.number', this).text(

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

                );

            });

        });

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

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

正在获取相对于页面的所有可见框的索引，那么如何仅获取相对于其父级的可见框的索引？我希望它会像

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

但这不起作用。

Answer 1

你不能做类似的事情吗

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

});