What is the best way to assign a single class from an array to every list item in a particular sequence?

Question

What is the best way to assign a single class from an array to every list item in a particular sequence?

html

<ul class="logoUl">
    <li class="orange"></li>
    <li class="blue"></li>
    <li class="green"></li>
    <li class="pink"></li>
</ul>

SCRIPT

if (selectedCategory == 'currentAll') {

    var strString = "orange,blue,green,pink";
    var strArray = strString.split(',');

    $.each(strArray, function (index, value) {
        $("ul.logoUl > li").addClass(value)
    });
}

Within the ul element with the class logoUL, there are four list items representing an image. Occasionally, these list items may receive background colors which override their original color scheme.

Unfortunately, my current code fails to revert these colors back to their initial state if they have been altered.

Question:

Is there a way to loop through each list item individually and add one class at a time in order to restore the original color scheme of the image?

jquery html css

Answer 1

Answer №1

let colors = "orange,blue,green,pink",
    colorArray = colors.split(',');

$("<ul.logoUl > li>").each(function (index, value) {
    $(this).addClass(colorArray[index]);
});

See Demo

Without using a loop:

let colors = "orange,blue,green,pink",
    colorArray = colors.split(',');

$("<ul.logoUl > li").addClass(function (index) {
    return colorArray[index];
});

See Demo

Note:

If you want to revert back to the original color scheme of each li element after changing their classes, first remove the current class and then re-assign the original one like so:

let colors = "orange,blue,green,pink",
    colorArray = colors.split(',');

$("ul.logoUl > li")
    .removeClass() // Remove previous class
    .addClass(function (index) { // Add new class
        return colorArray[index];
    });

See Demo

Answer 2

let colors = "orange,blue,green,pink",
    colorArray = colors.split(',');

$("<ul.logoUl > li>").each(function (index, value) {
    $(this).addClass(colorArray[index]);
});

See Demo

Without using a loop:

let colors = "orange,blue,green,pink",
    colorArray = colors.split(',');

$("<ul.logoUl > li").addClass(function (index) {
    return colorArray[index];
});

See Demo

Note:

If you want to revert back to the original color scheme of each li element after changing their classes, first remove the current class and then re-assign the original one like so:

let colors = "orange,blue,green,pink",
    colorArray = colors.split(',');

$("ul.logoUl > li")
    .removeClass() // Remove previous class
    .addClass(function (index) { // Add new class
        return colorArray[index];
    });

See Demo

Answer 3

Answer №2

To implement this functionality, simply

if (selectedCategory == 'currentAll') {

    var strColors = "orange,blue,green,pink";
    var colorsArray = strColors.split(',');

    $.each(colorsArray, function (key, color) {
        $("ul.logoUl > li").eq(key).addClass(color);
    });
}

Check out the live demo here: http://jsfiddle.net/joycse06/j4qqS/

Answer 4

To implement this functionality, simply

if (selectedCategory == 'currentAll') {

    var strColors = "orange,blue,green,pink";
    var colorsArray = strColors.split(',');

    $.each(colorsArray, function (key, color) {
        $("ul.logoUl > li").eq(key).addClass(color);
    });
}

Check out the live demo here: http://jsfiddle.net/joycse06/j4qqS/

What is the best way to assign a single class from an array to every list item in a particular sequence?

Answer №1

Without using a loop:

Note:

Answer №2

Similar questions

Toggle the visibility of an element with a single button click

Using jQuery to save PHP form output into an Excel spreadsheet

Can you explain the significance of the "row" class in Bootstrap, how it differs from containers, and how it interacts with col-***-*?

Requesting a download of a file via an Ajax call from a RESTful service

How to position a static element using CSS

Deactivate a form on the page while another form is being used

Eliminating an element from an array based on a single criterion

Tips for Controlling an Absent Search Bar in the HTML Source Code with Selenium

A guide on utilizing setTimeout for repeatedly executing a function

Javascript behavior during execution can vary from what is observed during debugging

Styling group headers within an unordered list using pure CSS - possible?

What is the best method in ASP.NET Boilerplate for retrieving JSON data?

Click here to see the image

Locate the present position of the slider element

Using React Native's stylesheet to apply multiple values in a CSS statement

The .play() method is not functioning as expected on the Safari browser when using an audio

Inadequate speed and efficiency in Javascript and JQuery operations

How come the link function of my directive isn't being triggered?

Check to see if there is a value present in a JavaScript array

What is preventing me from passing a JSON array as data in a GET request using jQuery Ajax?