jQuery custom selector

custom selector, add method to jquery object

by suphalak_26

HTML

<div>100.2</div>
<div>-100</div>
<div>-342.4</div>
<div>-234</div>
<div>0</div>
<div>abc</div>
<div>cde</div>
<div>-234</div>
<div>234</div>
<div>-99</div>
<input type="button" id="btnFormatPosNeg" value="Format Positive Negative Numbers"/><br/>
<input type="button" id="btnCustomMethod" value="Custom Method on jQuery object"/>
<div id="divOverrideMethod"/>
<input type="button" id="btnOverrideMethod" value="Overridden Method Example object"/>

CSS

input{margin:5px;}
div{margin:2px;}

JavaScript

(function($) {
    $.expr[":"].formatPos = function(elem, idx, meta, items) {
        return $.isNumeric(elem.innerHTML) && elem.innerHTML >= 0;
    };
    $.expr[":"].formatNeg = function(elem, idx, meta, items) {
        return $.isNumeric(elem.innerHTML) && elem.innerHTML < 0;
    };

    // adding a method to the jquery object
    $.logAndAlert = function(value) {
        if (value != null) {
            if (console) console.log(value);
            alert(value);
        }
    };

    // overriding an existing method (NOT RECOMMENDED)
    $.old_isNumeric = $.isNumeric;
    $.isNumeric = function(arg) {
        if ($.old_isNumeric(arg)) {
            if (console) console.log("Yes, " + arg + " is numeric");
            return true;
        } else {
            if (console) console.log("No, " + arg + " is not numeric");
            return false;
        }
    };
})(jQuery);

$(function() {
    $("#btnFormatPosNeg").click(function() {
        $("div:formatPos").css({
            "color": "Green",
            "font-weight": "Bold"
        });
        $("div:formatNeg").css({
            "color": "Red",
            "font-weight": "Bold"
        });
    });
    $("#btnCustomMethod").click(function() {
        $.logAndAlert("button clicked");
    });
    $("#btnOverrideMethod").click(function() {
        $("#divOverrideMethod").append($.isNumeric(5).toString());
        $("#divOverrideMethod").append($.isNumeric("xyz").toString());
    });
});