JSFiddle - React, Tailwind, and code Playground

by Danny_Joris

HTML

<div class="container">
    <div class="column">0</div>
    <div class="column pink">1</div>
    <div class="column">2</div>
    <div class="not-column">3</div>
    <div class="column last">4</div>
</div>

SCSS

.container {
    float: left;
    width: 100%;
    font-size: 16px;
    font-family: sans-serif;
    color: white;
    text-align: center;
}

.column {
    float: left;
    width: 200px;
    height: 50px;
    margin: 5px;
    padding-top: 15px;
    background: hotpink;
    clear: both;
    box-sizing: border-box;
}

.pink {
    background: pink;
}

.not-column {
    @extend .column;
    background: white;
    border: 1px solid hotpink;
    color: hotpink;
}

JavaScript

var myObject = {
    'columns': $('.column')
};

var filtered = myObject.columns.filter('.pink');
var nonExistent = myObject.columns.filter('.purple');

// check what it returns
console.log(filtered, 'filtered value');

// check what non-existent value returns
console.log(nonExistent, 'non-existent value');

// check if the original value is modified. (spoiler: still contains all items)
console.log(myObject.columns, 'original value not modified after filter');

// check if index() returns relative to selected group or DOM. (spoiler: checks the DOM index)
console.log(myObject.columns.last().index(), 'index');

// to grab the index of a selection, pass it to .index() as an argument
console.log(myObject.columns.last().index('.column'), 'index based on selection');

// this doesn't work
console.log(myObject.columns.last().index($('.column')), 'index based on jQuery selection doesnt work');

// shorter version of index in selector
console.log(myObject.columns.index($('.last')), 'index based on selection (short)');

// If I remove an item from the selector, does it get removed from the DOM? (it does)
// myObject.columns.filter('.last').remove();

var columnsCopy = myObject.columns;
// If I remove an item from the copy of the selector, does it get removed from the DOM? (yes it does)
// columnsCopy.filter('.last').remove();