Quiero usar jQuery para asignar un número a cada fila. Si el elemento tiene una clase oculta, ignórelo y ordene automáticamente el número.
<style> :before{ display:block; margin-top:10px; font: inherit; } .tc-hidden{ display:none; } .tc1 h3.tm-section-label:before { content: "1"; } .tc2 h3.tm-section-label:before { content: "2"; } .tc3 h3.tm-section-label:before { content: "3"; } .tc4 h3.tm-section-label:before { content: "4"; } </style> <div class="tc-cell tc1"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc2 tc-hidden"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc3 tc-hidden"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc4"> <h3 class="tm-section-label"></h3> </div>Como se sabe, el último elemento debe mostrar el número 2 pero muestra el número 4
Puede eliminar clases de tc1 tc2 tc3 tc4 y si cada elemento no tiene tc-hidden , agregue la Clase apropiada.
var count=0; $.each($(".tc-cell"),(index,item)=>{ if(!$(item).hasClass("tc-hidden")) $(item).addClass("tc" + ((index+1)-count)); else count++; }); <style> :before{ display:block; margin-top:10px; font: inherit; } .tc-hidden{ display:none; } .tc1 h3.tm-section-label:before { content: "1"; } .tc2 h3.tm-section-label:before { content: "2"; } .tc3 h3.tm-section-label:before { content: "3"; } .tc4 h3.tm-section-label:before { content: "4"; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tc-cell "> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc-hidden"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc-hidden"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell"> <h3 class="tm-section-label"></h3> </div>Puede recorrer los elementos .tc-cell y determinar si estaban ocultos y ajustar dinámicamente sus nombres de clase tc-<n> :
let i = 1; // Starting index number for tc<i> class name to use $('.tc-cell').each(function(){ // Remove all tc-<n> classes from this tc-cell // See https://stackoverflow.com/a/5182103/378779 $(this).removeClass (function (index, className) { return (className.match (/(^|\s)tc\d+/g) || []).join(' '); }); // If we should not be hidden, add a class of tc<i> and increment i: if ( ! $(this).hasClass('tc-hidden') ) { $(this).addClass('tc' + i++); } }); :before{ display:block; margin-top:10px; font: inherit; } .tc-hidden{ display:none; } .tc1 h3.tm-section-label:before { content: "1"; } .tc2 h3.tm-section-label:before { content: "2"; } .tc3 h3.tm-section-label:before { content: "3"; } .tc4 h3.tm-section-label:before { content: "4"; } <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <div class="tc-cell tc1"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc2 tc-hidden"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc3 tc-hidden"> <h3 class="tm-section-label"></h3> </div> <div class="tc-cell tc4"> <h3 class="tm-section-label"></h3> </div>