Changing class name from an array?

Question

Okay, so say I have a piece of text and I want to change its formatting by changing its class name. The class names are all organized in an array. (I'm not sure if this is the best way to go about it, so I'm more than happy to take suggestions to the contrary)

So say the class name was class1 and I had the array

[class1, class2, class3, ..., class10]

What's the best way to cycle the class name to the next item in the array on a mouseover using jQuery?

Keep a counter. Increment on mouseover and when it hits the length of the array, reset it. — j08691
– j08691, Commented Dec 1, 2012 at 2:14
Add some more details, such as relevant parts of your markup and anything you have tried so far. — Ja͢ck
– Ja͢ck, Commented Dec 1, 2012 at 2:30

mqchen · Accepted Answer · 2012-12-01 02:36:06Z

1

Here is an alternative that doesn't use a counter.

http://jsfiddle.net/mqchen/9LHE5/

var classes = ["red", "blue", "green", "papayawhip"];

$("#something").mouseenter(function(e) {
    classes.push(classes.shift());
    $(this).removeClass(classes[classes.length - 1]).addClass(classes[0]);
});

Basically, it removes the first element from the array, using shift, appends it to the end of the array, then removes that class (which is now at the end of the array) from the element, and then adds the first element from the array (which used to be the second element), using push.

EDIT: Here is a revision that starts on the first class in the array instead of the second. http://jsfiddle.net/mqchen/9LHE5/2/

answered Dec 1, 2012 at 2:36

mqchen

4,1931 gold badge24 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roko C. Buljan Over a year ago

This is beautiful +1 specially the revision

Kimberly S Over a year ago

This is perfect! Exactly what I was looking for.

Michael Berkowski · Accepted Answer · 2012-12-01 12:54:32Z

Store a global counter, and use it by counter % classes.length where classes is your array. It just keeps incrementing but % returns the correct index when used with the length of your array classes.length.

var classes = ['class1','class2','class3','class4'];
// Will hold the current iteration's index
// initialized to 0 on page load...
var counter = 0;

function advance() {
  // Remove the current iteration's class based on the counter's current value
  $('#thediv').removeClass(classes[counter] % classes.length);

  // Increment the counter to the next value
  counter++;

  // Add the new iteration's class based on the counter's *new* incremented value
  $('#thediv').addClass(classes[counter % classes.length]);
}

Bind the advance() function to your node's onmouseover.

$(document).ready(function() {
  $('#yourElement').mouseover(advance);
});

Here is a demo on jsfiddle.net

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

jsBin demo

Let's say your class is called .font + and an N number:

CSS:

h1{
  color:purple;
}

.font0{
 color:gray !important;
}

.font1{
 color:red !important;
}

.font2{
 color:blue !important;
}

.font3{
 color:gold !important;
}

jQuery:

var c = 0;
$('h1').on('mouseenter',function(){  
  $(this).removeClass().addClass( 'font'+ (c++%4) ); 
  // console.log( c%4 ); // TEST counter
});

is good to use the !important if you plan to ADD / overwrite some element existent styles.

You need to remove from the element the CLASS before adding a new one using .removeClass().

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 1, 2012 at 2:26

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

danronmoon · Accepted Answer · 2012-12-01 02:27:36Z

0

var classArr = ['class-1', 'class-2', 'class-3', ...],
    classArrLengthNum = classArr.length,
    arrIdxNum = 0;

$(el).mouseover(function () {
    arrIdxNum += 1;
    if (arrIdxNum === classArrLengthNum) {
        arrIdxNum = 0;
    }

     el.attr('class', classArr[arrIdxNum]);
});

answered Dec 1, 2012 at 2:27

danronmoon

3,8735 gold badges36 silver badges58 bronze badges

Comments

prodigitalson · Accepted Answer · 2012-12-01 02:39:12Z

Something like this should work:

$('#theelement').mouseover(function(e) {
    var classes = ['class1', 'class2', 'class3', 'class10'],
        $this = $(this),
        current = $this.attr('class').split(' ');
    for (var i = 0; i < current.length; i++) {
        lindx = $.inArray(current[i], classes);
        if (lindx != -1) {
            classname = current[i];
            next = lindx + 1 >= classes.length ? classes[0] : classes[lindx + 1];
            $this.toggleClass(classname + ' ' + next);
            break;
        }
    }
});

http://jsfiddle.net/szh7K/

Ive done it this way instead of using a counter so that there is no need for an external variable. PRobably a better implementation would be to use a counter instead of searching the array everytime but use $.data to store that counter index on the element itself.

$('#theelement').mouseover(function(e) {
    var classes = ['class1', 'class2', 'class3', 'class10'],
        $this = $(this),
        cur = $this.data('currentIndex')||0, // if there is no value then we start from scratch
        next = cur+1 >= classes.length ? 0 : cur+1; // if we are at the end we start over

        $this.toggleClass(classes[cur] + ' ' + classes[next]); // toggle the classes
        $this.data('currentIndex', next); // assign the incremented index as current
});

http://jsfiddle.net/jkPps/1/

Sampson · Accepted Answer · 2012-12-01 02:39:17Z

0

Start by declaring your classes, and a variable to track the current index:

var classes = ["red", "blu", "grn"], index = -1;

Next setup the mouseenter functionality:

$("body").on("mouseenter", function(){
    this.className = classes[++index % classes.length];
});

This will grab the next available value from the array, and when it's at the end of the array it will wrap back around and grab the item at index 0.

Demo: http://jsfiddle.net/R48FC/

answered Dec 1, 2012 at 2:39

Sampson

269k76 gold badges546 silver badges570 bronze badges

Comments

Useless Code · Accepted Answer · 2012-12-01 03:06:25Z

This version preservers any other classes that might have been set on the element you are cycling the classes on. It also passes jsLint ;-)

$.ready(function () {
    'use strict';
    var cycles = ['class1', 'class2', 'class3', 'class4'],
        cycleLength = cycles.length,
        cycleCount = 0; // assumes the first class was already set in the HTML

    $('#element').mouseover(function (ev) {
        var $this = $(this);
        // remove the previous class
        $this.removeClass(cycles[cycleCount]);

        // get the next class
        cycleCount += 1;
        cycleCount %= cycleLength;

        // add new class
        $this.addClass(cycles[cycleCount]);
    });
});

You'll notice that in this working example the text stays bold since the .b class is not removed when it cycles through the classes from the array. You might also want to use jQuery.mouseenter() instead of mouseover if the element you are putting this event on has child nodes.

Collectives™ on Stack Overflow

Changing class name from an array?

7 Answers 7

2 Comments

Here is a demo on jsfiddle.net

Comments

jsBin demo

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related