I want to use jQuery to assign a number to each row. If the element has a hidden class, ignore it and automatically sort the number.
<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>As it is known, the last element must show the number 2 But it shows the number 4
You can remove classes of tc1 tc2 tc3 tc4 and if every item doesn't have tc-hidden you add the appropriate Class.
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>You can loop through the .tc-cell elements and determine whether they were hidden, and dynamically adjust their tc-<n> class names:
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>