仅为可见元素插入计数

Question

我有五div他们中的一些具有display:block和其他人display:none,而且是动态变化的.我正在尝试为可见元素添加带有计算的标题.例如,如果我有两个可见元素,第一个应该有"seance 1",第二个应该有"seance 2",但实际上我有两个"seance 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每个都足够了

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

小提琴 - https://jsfiddle.net/fkbqdepo/