Sort the DOM elements in jQuery based on their CSS color property

Displayed on the page below is a list of usernames in a random order. I'm looking to sort them using jQuery in the following sequence:

red blue green purple black

This is my current progress:

<script type="text/javascript">
$(function() {
    var admin       = "rgb(255, 0, 0)";
    var moderator   = "rgb(00, 00, 255)";
    var text        = "rgb(00, 128, 00)";
    var vip         = "rgb(128, 00, 128)";

    var adminBuffer = [];
    var moderatorBuffer = [];
    var textBuffer = [];
    var vipBuffer = [];
    var html;

    $("div#active_users span.name").each(function(i) {
        color = $("a span",this).css("color");
        html = $(this).html();
        if(admin == color){
            adminBuffer[i] = "<span class='name'>" + html + "</span>";
        }
        //$(this).clone().append("&nbsp").appendTo('#rezultat');
    });
    jQuery.each(adminBuffer, function() {
        //alert(this);
        $(this).appendTo("#rezultat");
    });
});
</script>

I have successfully identified the red username but am encountering difficulties appending it to another element with an ID of "rezultat".

Any suggestions or ideas are appreciated!

Answer №1

I've successfully included the classes (admin, moderator, etc) in my elements which has made things much simpler... ;) Many thanks to clintp for the helpful suggestion! :)

Answer №2

TinySort is a versatile plugin designed to arrange child nodes based on their content or attributes. It can be particularly handy for organizing unordered lists or tables, although it is suitable for any type of node.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to reduce a varying percentage as the value continues to rise?

My memory of math may be a bit fuzzy, but I can't seem to recall how to solve this particular issue. In jQuery, I have been adding randomized clipping paths to my images using the following code: var max=100; var spread=5; jQuery.each( $("img"), func ...

Calling Ajax to Flask for fetching MySQL query results

My goal is to populate a drop-down list in my HTML using AJAX by calling my flask app app.py from app.js. I am attempting to load the data when the page initially loads and triggering the AJAX within $(document).ready as shown below: Here is the content o ...

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script

Why is it not recognizing styles and showing an error? All paths seem correct, styles and scripts are connected, but it's either not reading them at all (styles) or displaying an error. Here is the html, javascript, css code. How can this error be fix ...

Overflow of dropdown menus in HTML CSS

Hello, I am new to both html and stack overflow. Please forgive me if this question has already been asked, as I couldn't find anything (but maybe I didn't search enough?). I have tried using overflow and clear properties, but I am struggling to ...

What method can I use to enlarge the carousel component from the flowbit-svelte library?

I have been working on a project that requires a Carousel, and I decided to incorporate the flowbit-svelte carousel into my svelte project. While the carousel is functioning well, I am facing an issue with the component size. It seems to be cutting off my ...

Creating a Background Cutout Effect with CSS Using Elements instead of Images

I'm working on creating a unique visual effect that simulates a "window" where the div placed above all other elements acts like a window, allowing the background color to show through. Take a look at this example for reference. My goal is to make th ...

Getting started with jquery plugins: installation and usage

I have some questions as a beginner. Firstly, I'm interested in obtaining this plugin: Unfortunately, I am having difficulty downloading it and seem to be stuck in a loop. Can someone guide me on the exact steps to download it? Secondly, how do I go ...

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/ I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any a ...

Modifying the appearance of a CSS element with jQuery: Step-by-step guide

The code I have is as follows: $('.signup-form-wrapper').css("style", "display: block"); $('.login-form-wrapper').css("style", "display: none"); I'm not sure why it's not working. The current appearance of ...

Hover over to reveal the button after a delay

I'm struggling with implementing a feature in my Angular code that displays a delete button when hovering over a time segment for 2 seconds. Despite trying different approaches, I can't seem to make it work. .delete-button { display: none; ...

The navbar links in Bootstrap 4 may be hidden, but the navbar brand still remains visible

I have implemented this code for my website's navbar, however, upon running it, I noticed that the navigation links are not visible. The navbar brand name "test" appears correctly, but the other links seem to be hidden. Does anyone have any insights o ...

What is the best way to make img-fluid function properly within Bootstrap Carousel?

I've been struggling to make my carousel images responsive by using the img-fluid tag, but I haven't had any success. I've attempted using !important and display: block, but nothing seems to work. I'm not sure what's causing the is ...

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

After posting a question on this topic here, I am seeking advice on how to implement "step-based heights" for a div element. To further clarify, my goal is to have each box with a height that is a multiple of 400px. For example, if the height is 345px, it ...

Leveraging the local variables within a function in conjunction with the setTimeout method

Currently, I'm facing an issue with a website that I'm working on. I have created a function that should add a specific class to different ids in order to make images fade out one by one on the home page. To streamline the process, I used a local ...

How to resolve: Preventing Ajax - Post request from executing repetitively

I am facing an issue with a table that is formatted using the Datatables script. There is a column in the table which contains icons for actions. When a user clicks on an icon, a modal is loaded and its content is fetched using the POST method. The modal ...

Updating the original form upon hiding the popover within the Bootstrap framework

I am currently working on a form that is located inside a bootstrap popover. You can find a demo of the setup here: http://jsfiddle.net/BcczZ/185/ <div class="settings" data-toggle="popover" data-mysettings="#someid" data-original-title="Settings"> ...

jQuery slider triggering a function with a consistent delay of 1 until the handle is released

I've been trying to figure out this issue for a while now and haven't found a solution yet. If you take a look at my project here, you'll see that the values at the top don't update correctly until the handle is released. I've been ...

How can the JQuery Validation Plugin be used to include error messages in the Title Attribute?

I've searched high and low for a solution to this particular issue, but I haven't found one that suits my needs exactly. Currently, I'm using the JQuery Validator Plugin for a web form. I don't want the error message appended to the pr ...

Top method for establishing multiple aliases for disabled elements in CSS

Is there a way to have two different disabled states for checkboxes, one with a gray background and the other with a blue background, while maintaining the same functionality? Code within file.css .overall-example input[type=checkbox]:checked + label { ...

The request is not functioning as expected for some reason

My current challenge involves retrieving photos from Instagram using a GET request. I attempted to use jQuery.get(), which has been successful for other types of GET requests but not for Instagram. Despite trying to switch to jQuery.getJSON(), the issue pe ...