CODEWITHSUNDEEP
javascriptjquery
user3489744
user3489744

Reputation:

shorter version of jquery function

Ok, there is no problem, but i just got curious how to shorten this function.

$('input#sum').blur(function() {
        var fieldVal = $(this).val();
        $(this).val(formatNumber(fieldVal));
});

I get field value on blur modify it with formatNumber custom function and return. But is see I have 3 selectors there, is there a way to shorten this?

Format number function is:

function formatNumber(input) {
 // modify and return input
}

Upvotes: 0

Views: 127

Answers (5)

SnakeDrak
SnakeDrak

Reputation: 3642

You can use normal Javascript and create a formatNumber function extends String (or another type). 

// Your function
String.prototype.formatNumber = function () {
 // return the modified value of this
 return this;
};

$('selector').blur(function() {
    this.value = this.value.formatNumber();
});

UPDATED: Better you can extends the HTMLInputElement and add the function to it.

// Extends the HTMLInputElement
HTMLInputElement.prototype.formatNumber = function(){
 // Your function here
 this.value = this.value.toFixed(0); // An example
};

$('input').blur(function() {
   this.formatNumber(); // 1 line
});

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

$('input#sum').blur(function() {
    this.value = formatNumber(this.value);
});
//1 selector!

I don't even see why you would need jQuery there. Don't abuse jQuery when you don't actually need it.

Take a look at jQuery's source code at line 7294:

val: function( value ) {
    var hooks, ret, isFunction,
        elem = this[0];

    if ( !arguments.length ) {
        if ( elem ) {
            hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

            if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                return ret;
            }

            ret = elem.value;

            return typeof ret === "string" ?
                // handle most common string cases
                ret.replace(rreturn, "") :
                // handle cases where value is null/undef or number
                ret == null ? "" : ret;
        }
        return;
    }
    //...
}

If you get rid of the hook part which simply replace newlines into \r\n and ignore the bottom special null case, the only thing left is just ret = elem.value. Now you know that you can safely use this.value instead of $(this).val().

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can directly put formatted value in .val(). And use id selector $('#sum') instead of $('input#sum') directly, but make sure that you have unique id through out the html page.

$('#sum').blur(function() {
        $(this).val(formatNumber($(this).val()));
});

Upvotes: 0

George
George

Reputation: 36784

You sure can, by passing a function to val():

$('input#sum').blur(function() {
    $(this).val(function(_,v){ return formatNumber(v); });
});

Documentation

Upvotes: 2

Mattigins
Mattigins

Reputation: 1016

$('input#sum').blur(function() {
        $(this).val(formatNumber($(this).val()));
});

Doesn't solve your selectors problem, but it's shorter..

Upvotes: 1

Related Questions