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>

CODE：

        $('.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);
        });
    });

});

单独编号div中的可见元素

1 个答案: