JSFiddle - React, Tailwind, and code Playground

by Danny_Joris

HTML

<div class="container roygbiv">
    <div class="red"></div>
    <div class="orange"></div>
    <div class="yellow"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="indigo"></div>
    <div class="violet"></div>
    <div class="white"></div>
</div>
<div class="container logs"></div>
<div class="container logs2"></div>

CSS

.container {
    float: left;
}
.container > div{
    width: 100px;
    height:50px;
    border: 1px solid #ccc;
}

JavaScript

// Take first 3 items and move them to the back.
var allColors = $(".roygbiv > div");

// Slice the first 3 items and place them in the back of the list.
allColors.each(function() {
  var color = $(this).attr('class');
  $(this).css('background-color', color);
})
.slice(0, 3)
.appendTo(allColors.parent());

// After appending the sliced elements to the back of the list, the DOM updates,
// but the order of the original object remains the same.
allColors.each(function(index) {
    var color = $(this).attr('class');
    var logmsg = color + ' | ' + index;
    color = (color == 'white') ? '#ccc' : color;
    $('<div>' + logmsg + '</div>').css('color', color).appendTo('.logs');
});

// When performing a new jQuery select, the indexes are in the correct order.
$(".roygbiv > div").each(function(index) {
    var color = $(this).attr('class');
    var logmsg = color + ' | ' + index;
    color = (color == 'white') ? '#ccc' : color;
    $('<div>' + logmsg + '</div>').css('color', color).appendTo('.logs2');
});

$('.red').html(function() {
  return $(this).index();
});