How To Wrap The Jquery Function

Question I'd like to know the best way I can wrap the jQuery function while retaining all functionality. Essentially I want to call $('#someId') but have it operate as $('#' + id +

Solution 1:

Here's a different implementation:

DEMO

(jQuery.fn.init = (function (init) {

    returnfunction (selector) {
        if (typeof selector === 'string' && selector[0] === '#') {
            arguments[0] = selector.replace('#', '#prefix_');
        }

        return init.apply(this, arguments);
    };

})(jQuery.fn.init)).prototype = jQuery.fn;


$(function () {
    console.log($('#test').length);
    console.log($.ajax);
});

EDIT: Followup question: How can I apply this only within a closure? For example, within an object.

Perhaps with functions that allows to add named decorators and remove them, something like:

HTML

<div id="prefix_test"></div>

JS

var decJQ = (function (decJQ, $) {
    var decorators = {},
        init = $.fn.init;

    ($.fn.init = function () {

        for (var k in decorators) {
            if (decorators.hasOwnProperty(k)) {
                arguments = decorators[k].apply(this, arguments);
            }
        }

        return init.apply(this, arguments);
    }).prototype = $.fn;

    return $.extend(decJQ, {
        decorate: function (name, fn) {
            decorators[name] = fn;
        },
        undecorate: function (name) {
            delete decorators[name];
        }
    });

})(window.decJQ || {}, jQuery);

decJQ.decorate('idPrefix', function (selector) {
    if (typeof selector === 'string' && selector[0] === '#') {
        arguments[0] = selector.replace('#', '#prefix_');
    }

    returnarguments;
});

$(function () {
    console.log($('#test').length); //1

    decJQ.undecorate('idPrefix');

    console.log($('#test').length); //0
});

EDIT 2: You could also go for something extremely simple, such as:

(function ($) {
    //use $ which has been wrapped
})(function () {
    //do some manipulationsreturn jQuery.apply(this, arguments);
});

Solution 2:

Following the suggestion by Bergi and the post he links to here, this is one way to go:

$.fn.extend({
    initCore: $.fn.init,
    init: function (selector, context, rootjQuery) {
        if (typeof selector === 'string' && selector[0] === '#') {
            selector = selector.replace('#', '#' + winId);
        }
        return $.fn.initCore(selector, context, rootjQuery);
    }
});

$.fn.init.prototype = $.fn;

I've tested $('#foo') will find a div that has a winId prefixed to the id value, like this <div id="1foo"></div>.

For example: http://jsfiddle.net/MfdJS/1/

Solution 3:

Add class="winID" to your elements.

Use $(".winID").find('#someId").css(...) to access CSS attributes of specific element.

Use $(".winID").css(...) to access CSS attribues to all winID tagged elements.

Solution 4:

ok well i just tested

$('.con'+'tainer')

and

$('d'+'iv');

and

var s = 't';
$('.con'+s+'ainer');

and the console is returning the correct values

i belive that you are calling a function jQuery() with a string parameter, so as long as you use the normal syntax for building/appending/constructing a string with the plus signs, i think you're golden. im glad you asked this question because now i know too

Solution 5:

That's a pretty strange thing to do. Why don't you just create a CSS selector string for winId and save it as a variable?

var foo = '#' + winId;

Now you can do:

$(foo + ', #bar').html("add some content"); 

What you're proposing to do will leave any programmer working on this project -- including you six months from now -- completely flummoxed when they use $('#bar') and it's actually selecting #foo and #bar.