JSFiddle - React, Tailwind, and code Playground

by qwweee7467

HTML

<div id="a">apple</div>
<div id="b" class="custom">bird</div>
<div id="c" class="custom">cat</div>
<div id="d">dog</div>
<div id="e">eat</div>
<div id="f">fat</div>
<div id="g">google</div>

JavaScript

/* Adding Custom Methods to jQuery */

$.fn.sample_all = function() {
    $(this).css({
        color: "blue"
    });
}

$.fn.extend({
    red: function() {
        $(this).css("color", "red");
    },
    blue: function() {
        $(this).css("color", "blue");
    },
    green: function() {
        $(this).css("color", "green");
    }
});

$.fn.customMethod = function() {
    $(this).each(function() {
        // Iterate through selected elements one by one
        var id_name = $(this).attr("id");
        // Grab the id name of this element
        // Do something to the objects
    });
    // We're done working with the this object, return it to enable chainability flow
    return this;
}


$("div").first().sample_all();

$(".custom").css("color", "red").customMethod().append('[custom]');

$("#e").red();
$("#f").blue();
$("#g").green();