0

順序付きリストのように、順番に番号を付ける必要があるボックスを含むセクションがいくつかあります (ただし、残念ながら、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 に番号付けされていますが、2 番目のセクションになると、1 と 2 の代わりに 3 と 4 の番号が付けられます。

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

page に関連するすべての表示ボックスのインデックスを取得していますが、親のみに関連する表示ボックスのインデックスを取得するにはどうすればよいですか? 私はそれが次のようなものになることを望みました

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

しかし、それはうまくいきません。

4

1 に答える 1

4

次のようなことはできませんでしたか

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

});
于 2013-11-13T11:42:37.667 に答える