Question

<div class='itemp'><span class='spanindex'>1</span>323</div>  
<div class='itemp'><span class='spanindex'>2</span>525</div>  
<div class='itemp'><span class='spanindex'>3</span>727</div>  
<div class='itemp'><span class='spanindex'>4</span>454</div>

现在我点击了按钮，隐藏了第一个和第三个.itemp，并希望更新.spanindex文字以显示可见项目的索引+ 1：

<div class='itemp'><span class='spanindex'>1</span>525</div>
<div class='itemp'><span class='spanindex'>2</span>424</div>

我尝试使用something like this，但它不适用于each版本

js

$('.spanindex').each(function(){            
   $(this).text($(this).siblings('.visible').addBack().index('.spanindex')+1);
})

任何帮助？

Answer 1

您可以通过选择:visible元素来实现此目的，然后使用您可以提供给index的函数的text()参数来更新值。试试这个：

＆＃13;

$('button').click(function() {
  $('.itemp:eq(0), .itemp:eq(2)').hide();
  
  $('.spanindex:visible').text(function(i) {
    return i + 1;
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemp"><span class="spanindex">1</span> 323</div>
<div class="itemp"><span class="spanindex">2</span> 525</div>
<div class="itemp"><span class="spanindex">3</span> 727</div>
<div class="itemp"><span class="spanindex">4</span> 454</div>

<button>Click me</button>

＆＃13;

Answer 2

检查以下代码

＆＃13;

$(document).on("click", "#btnUpdate", function (event) {
  $('.itemp:visible').each(function(i,v){   
     $(v).find('.spanindex').text(i+1);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='itemp' style="display:none"><span class='spanindex' >1</span>323</div>  
<div class='itemp'><span class='spanindex'>2</span>525</div>  
<div class='itemp' style="display:none"><span class='spanindex'>3</span>727</div>  
<div class='itemp'><span class='spanindex'>4</span>454</div>

<input type='button' value='Update' id='btnUpdate'/>

＆＃13;

隐藏其中一些项目后更新每个项目的索引

2 个答案: