How to pass to 'this' as a parameter to a function in jQuery?

Question

This is my attempt:

$(document).ready(function () {

   function hideshow(obj){
       $(obj).closest(".actions").hide(); 
       $(obj).closest(".actions").prevAll(".nume_serviciu").hide();
       $(obj).closest(".actions").prevAll(".nume_serviciuHidden").show();

       $(obj).closest(".actions").parent(".fct-desc").next(".fct-buc").find(".cantitateHidden").show();
       $(obj).closest(".actions").parent(".fct-desc").next(".fct-buc").find(".b").hide();

       $(obj).closest(".actions").parent(".fct-desc").nextAll(".fct-pretu").find(".pret_unitarHidden").show();
       $(obj).closest(".actions").parent(".fct-desc").nextAll(".fct-pretu").find(".c").hide();
    }

    $(".cancel_rand_update").click(function(obj){ 
        hideshow(obj);
    });
});

and this is the working code doing the samething:

$(".cancel_rand_update").click(function(){ 
   $(this).closest(".actions").hide(); 
   $(this).closest(".actions").prevAll(".nume_serviciu").hide();
   $(this).closest(".actions").prevAll(".nume_serviciuHidden").show();

   $(this).closest(".actions").parent(".fct-desc").next(".fct-buc").find(".cantitateHidden").show();
   $(this).closest(".actions").parent(".fct-desc").next(".fct-buc").find(".b").hide();

   $(this).closest(".actions").parent(".fct-desc").nextAll(".fct-pretu").find(".pret_unitarHidden").show();
   $(this).closest(".actions").parent(".fct-desc").nextAll(".fct-pretu").find(".c").hide();
});

My question is how can i pass the this element as a parameter to a function ?

Answer 1

You can do

$(".cancel_rand_update").click(function(){ 
    hideshow($(this));
});

Answer 2

The click handler function parameter is not the element, but an event. Use this instead:

$(document).ready(function () {
   function hideshow(obj){
       obj.closest(".actions").hide(); 
       obj.closest(".actions").prevAll(".nume_serviciu").hide();
       obj.closest(".actions").prevAll(".nume_serviciuHidden").show();

       obj.closest(".actions").parent(".fct-desc").next(".fct-buc").find(".cantitateHidden").show();
       obj.closest(".actions").parent(".fct-desc").next(".fct-buc").find(".b").hide();

       obj.closest(".actions").parent(".fct-desc").nextAll(".fct-pretu").find(".pret_unitarHidden").show();
       obj.closest(".actions").parent(".fct-desc").nextAll(".fct-pretu").find(".c").hide();
    }

    $(".cancel_rand_update").click(function(e){ 
        hideshow($(this));
    });
});

Answer 3

Use call() to pass a context:

$(".cancel_rand_update").click(function (obj) {
    hideshow.call(this);
});

Then the function should work:

function hideshow() {
    $(this).closest(".actions").hide();
    $(this).closest(".actions").prevAll(".nume_serviciu").hide();
    $(this).closest(".actions").prevAll(".nume_serviciuHidden").show();

    $(this).closest(".actions").parent(".fct-desc").next(".fct-buc").find(".cantitateHidden").show();
    $(this).closest(".actions").parent(".fct-desc").next(".fct-buc").find(".b").hide();

    $(this).closest(".actions").parent(".fct-desc").nextAll(".fct-pretu").find(".pret_unitarHidden").show();
    $(this).closest(".actions").parent(".fct-desc").nextAll(".fct-pretu").find(".c").hide();
}

Answer 4

You can just do:

(".cancel_rand_update").click(hideshow);

Here's a small example:

function handleClick (event) {
  console.log( this, event );
}

$('.something').on('click', handleClick);

this in handleClick will be the element that was clicked. The first argument will be the event.

Fiddle: http://jsbin.com/sefuqowu/1/edit

PS: Cache $(obj), or now, $(this) like var $this = $(this) then just use $this.