How do I replace a class with jQuery?

Class="n1" changed to class="n10" after 1 second
Class="n2" changed to class="n1" after 1 second
After 2 seconds, class="n3" changes to class="n2"
Class="n4" changed to class="n3" after 3 seconds
Class="n5" changed to class="n4" after 4 seconds
After 5 seconds, class="n6" changes to class="n5"
After 6 seconds, class="n7" changes to class="n6"
Class="n8" changed to class="n7" after 7 seconds
Class="n9" changed to class="n8" after 8 seconds
Class="n10" changed to class="n9" after 9 seconds
After 10 seconds, repeat after 1 second.

The css previously specifies the coordinates (position) between n1 and n10, so it is an image that moves every second.
There are 10 classes up to n10, so instead of setting the position of css in jQuery, I want to change the class name, and even if I try writing it below, it doesn't move.Please let me know.

$(function(){
    $(".n2")
    setTimeout(function(){
        $('.n2').toggleClass('n1');
    },3000);
});

■Additional information.
How do I write a one-second stop for class="n1"?I used gocho's sample and put in the variable classNameList, but it didn't work below.Definition of stop?I don't know the function settings.

 if(classNameList='n1'){
    setTimeout ('stop', 1000);
}

jquery

2022-09-30 20:14

3 Answers

If you change className and select a node by className one after another, I think it won't work because the node before and after processing are mixed.
We recommend that you store the group of nodes that you want to change className once in a variable

Implementation Example:

(function(){
  var$wrapper=$('.wrapper')
  varclassNameList = [
    'n1', 'n2', 'n3', 'n4', 'n5',
    'n6', 'n7', 'n8', 'n9'
  ];
  setInterval(function(){
    // Retain querySelector results so that changing className does not change querySelector results
    var nodes = classNameList.map(function(className){
      US>return{
        className —className,
        $node: $wrapper.find('.'+className)
      };
    });
    nodes.forEach(function(current,currentIndex,whole){
      var nextIndex=(currentIndex===whole.length-1) ?0:currentIndex+1;
      current.$node.removeClass(current.className);
      current.$node.addClass(whole[nextIndex].className);
    });
  }, 1000);
})();

.something{
  width: 30px;
  height: 30px;
  float:left;
}

.n1{
  background-color:#EDF
}

.n2{
  background-color:#FED
}

.n3{
  background-color:#DFE
}

.n4{
  background-color:#EFD
}

.n5{
  background-color:#DEF
}

.n6{
  Background-color: #FDE
}

.n7{
  background-color:#DEF
}

.n8{
  Background-color: #FDE
}

.n9{
  background-color:#EFD
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
  <div class="something n1"></div>
  <div class="something n2"></div>
  <div class="something n3"></div>
  <div class="something n4"></div>
  <div class="something n5"></div>
  <div class="something n6"></div>
  <div class="something n7"></div>
  <div class="something n8"></div>
  <div class="something n9"></div>
</div>

2022-09-30 20:14

Am I correct in understanding that you would like to achieve the following two functions?

Replace all specified classes sequentially every second
Replace the class name of the CSS starting with n minus 1 as n9→n8

Please refer to the code below.

$( document).ready(function(){
    varcnt = 0;

    // repetitive processing
    ( function loop() {
        if(cnt<=10){
            // Replace class name
            replace();

            // Call yourself (loop) after 1 second
            setTimeout (loop, 1000);
        }

        cnt+=1;
    })();
});

/** Replacement CSS class name prefix */
var target = "n";

/**
 * Class replacement process.
 */
var replaceer=function(){
    // Extract all class names of div elements that begin with the variable target in a forward match
    $.each($("div[class^="+target+"]US>"), function() {

        // Obtain extracted class name
        var name = $(this).attr('class');
        varlen=target.length;

        // Determine the name after replacing the class name.n8 → n7.
        vartoName=name.substring(0,len)+(name.substring(len)-1);

        // Delete old class name → Replace with replaced class name.
        $(this).removeClass(name).addClass(toName);
    });
};

toggleClass() is a feature that removes or adds a specified class if it does not exist.

In addition, this code is only a minimum operation check, so it does not support the following:

Two or more digits, such as n10,
Convert any other div that starts with n

2022-09-30 20:14

I think the following is fine.

$(function(){
    vari = 1; // Start number
    setInterval(function(){
        var next_i=(i==1) ? 10:i-1; //10 is the largest number
        $(".n"+i).toggleClass("n"+next_i).toggleClass("n"+i);
        ++i;
    }, 1000);
});

2022-09-30 20:14

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656