javascript - 仅为可见元素插入编号

Question

我有五个 div，其中一些带有 display:block，另一些带有 display:none，它会动态变化。 我正在尝试为可见元素添加带编号的标题。 例如，如果我有两个可见元素，第一个元素应该是“降神会 1”，第二个元素应该是“降神会 2”，但实际上两者都是“降神会 2”。这是我的代码:

$('#save').click(function() {
  var countVisible = $('.panel-title:visible').length;
  $('.panel-title').filter(':visible').each( function () {
    for (i=0; i<countVisible; i++){
      $(this).text('seance'+(i+1));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel" style="display:none;" id="seance1">
  <h4 class="panel-title"></h4>
</div>
<div class="panel" style="display:block;" id="seance2">
  <h4 class="panel-title">text text</h4>
</div>
<div class="panel" style="display:none;" id="seance3">
  <h4 class="panel-title"></h4>
</div>
<div class="panel" style="display:none;" id="seance4">
  <h4 class="panel-title"></h4>
</div>
<div class="panel" style="display:block;" id="seance5">
  <h4 class="panel-title">text text</h4>
</div>
<button id="save">save</button>

Answer 1

不要添加for循环。 jquery each 就够了

$('#save').click(function() {
    $('.panel-title').filter(':visible').each( function (i) {
      $(this).text('seance'+(i+1));
    });
  });

fiddle -- https://jsfiddle.net/fkbqdepo/