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

Troubleshooting Ajax Errors with MailChimp

Is there a way to modify or alter the layout specifically for mobile devices?

What is the best method for submitting an ajax form post when it is dynamically loaded within a bootstrap modal window?

The Jssor bullet navigator is not visible on the webpage

Unlocking the JSON array of data in JavaScript: A step-by-step guide

Why is it that every time I write this code, the localhost gets redirected and a message pops up saying

Off Canvas left navigation menu using Bootstrap

Creating and sending HTML formatted emails using Django 1.7

What causes my CSS styles to vanish upon refreshing the page in Next.js?

Color of Bootstrap tooltip arrow outline and fill

Issues with the alignment of columns using Bootstrap framework

Validation for HTML5 does not appear when inputmask is used for entering mobile numbers

Why is the Django image URL redirecting to an HTML template instead of the media file?

Encountering issues with accessing image files located in the public folder of my Next.js project - Receiving a 404 Error message

Applying a gradient overlay to an image using CSS

The press of the Enter key does not trigger the button

Tips on how to dynamically update information with Angular

What steps do I need to take in order to create a web-based file uploader that supports simultaneous uploads of multiple files

What is the best way to generate a JavaScript variable using information from SQLite?

What is the best way to trigger a function following a user's selection from a form-control on a webpage?