jQuery Auto number based on div class-CodePudding

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 >
        <h3 ></h3>
    </div>
    <div >
        <h3 ></h3>
    </div>
    <div >
        <h3 ></h3>
   </div>
   <div >
        <h3 ></h3>
   </div>

As it is known, the last element must show the number 2 But it shows the number 4

CodePudding user response：

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 >
        <h3 ></h3>
    </div>
    <div >
        <h3 ></h3>
    </div>
    <div >
        <h3 ></h3>
   </div>
   <div >
        <h3 ></h3>
   </div>

CodePudding user response：

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 >
    <h3 ></h3>
</div>
<div >
    <h3 ></h3>
</div>
<div >
    <h3 ></h3>
</div>
<div >
    <h3 ></h3>
</div>