jQuery Auto number based on div class

Question

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

jQuery cannot directly update the `content` of a pseudo element. You would need to change how your page works if you want to do this dynamically, eg: https://stackoverflow.com/a/42000085/519413 — Rory McCrossan, Jul 02 '22 at 18:14

score 1 · Answer 1 · answered Jul 02 '22 at 18:35

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>

score 1 · Accepted Answer · answered Jul 02 '22 at 18:38

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>

jQuery Auto number based on div class

2 Answers2