Question

I have a selector where I get the first element like that:

$("#MyControl")[0]

Is it possible to get the element with a function other than accessing the elements like a array?

What I want to do with that is to pass this element to a function with .call() to defines the context.

Here is an example:

$(document).ready(function () {
    $(document).on("change", "#MyControl", setActivityControlsState);
});

setActivityControlsState: function () {
    var selector = "#automaticActivityCreation";

    if ($(selector).length > 0) {
        if ($.isNumeric(this.value) && this.value > 0)
            $(selector).show();
        else
            $(selector).hide();
    }
}

referenceFormOnSuccess: function (data) {
    setActivityControlsState.call($("#MyControl")[0]);
}

As you can see in the refreshFormOnSuccess function, I must defines ‘this’ with $(“#MyControl”)[0].

I just want to know if is there a better way to do that.

Note that I don’t want to access the value of my control with something like $(this).val()

Answer 1

May I suggest a small re-structuring that mitigates that need:

$(document).ready(function () {
    $(document).on("change", "#MyControl", setActivityControlsState);
});

setActivityControlsState: function () {
    // cache jquery object instead of just the selector 
    // for better memory management
    var automaticActivityCreation = $("#automaticActivityCreation");

    if (automaticActivityCreation.length > 0) {
        if ($.isNumeric(this.value) && this.value > 0)
            automaticActivityCreation.show();
        else
            automaticActivityCreation.hide();
    }
}

referenceFormOnSuccess: function (data) {
    // fire the change event which will tap 
    // the listener you set up in .ready
    $("#MyControl").trigger('change'); 
}

but if you really want to get the object with jquery you do have some options:

// jQuery select #MyControl and get as dom element with array
$("#MyControl")[0]

// jQuery select #MyControl and get as dom element with .get
$("#MyControl").get(0)

but because you are using an element with an ID and you can only use a single ID at a time you really don’t need jquery for this

document.getElementById('MyControl')

or

referenceFormOnSuccess: function (data) {
    setActivityControlsState.call(document.getElementById('MyControl'));
}