JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

The "Select Me" div should have a red border and green background. The red border never draws because the string passed in as "this" from the array is passed in as type object, which jQuery then fails to detect as a string, and proceeds down a failed codepath.
<div id=SelectMe>Select Me</div>
<div id=output></div>

CSS

body {
    font-family: Verdana;
    font-size: 10pt;
}

JavaScript

var selectors = ['#SelectMe'];

$.each(selectors, function(i, val) {
    var selectMeA = $(val);
    var selectMeB = $(selectors[i]);
    
    selectMeA.css('border', '1px solid red');
    selectMeB.css('background', '#0f0');
    
    console.log("jquery", val, typeof val, typeof selectors[i] );
    console.log("jquery", this, typeof this, typeof selectors[i] );
    
    // Coerced:
    console.log("coerced", this+"", typeof this+"", typeof selectors[i] );
                        //  ^^^^^^ turns it into a regular string

});

selectors.forEach(function( val, i ) {
    var selectMeA = $(val);
    var selectMeB = $(selectors[i]);
    
    selectMeA.css('border', '1px solid red');
    selectMeB.css('background', '#0f0');
    
    console.log("native", val, typeof val, typeof selectors[i] );
    console.log("native", this, typeof this, typeof selectors[i] );
    
}, selectors);