jQuery Passing $(this) to a Function

Question

I have lines of code like this:

$(this).parent().parent().children().each(function(){
    // do something
});

It works well. But I need to run these lines multiple times. So I have created a function and pass $(this) parameter to a function:

myFunc( $(this) );

function myFunc(thisObj) {
    thisObj.parent().parent().children().each(function(){
        // do something
    });
}

But in this way, It didn't work.

There's nothing wrong with your code as written, so I suggest it's an error somewhere else. What do you mean by, "It didn't work"? — Tim Rogers, Oct 14 '11 at 12:46
I have use "this", but It doesn't work either. When I see $this and thisObj in Firebug it shows this: {$this = input.focus} but {thisObj = [input.focus]} ... Is there any difference? — Vahid, Oct 14 '11 at 17:55

score 83 · Answer 1 · edited Apr 12 '17 at 06:46

you can check this link.

http://jsfiddle.net/zEXrq/38/

$("#f").click(function() {
  myFunc($(this));
})

function myFunc(thisObj) {
  thisObj.parent().parent().children().each(function() {
    alert("childs")
  });
}

<div id="wordlist">
  <div id="a"></div>
  <div id="b">
    <div id="e"></div>
    <div id="f">child</div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

score 17 · Answer 2 · edited Apr 12 '17 at 06:43

17

jQuery will automatically invoke your function with the proper context set.

$('#button').on('click', myFunction);

function myFunction() {
    var that = $(this);
    console.log(that);
}

edited Apr 12 '17 at 06:43

Gleb Kemarsky

10,160
7
43
68

answered May 30 '15 at 03:17

Muhammad Tahir

2,351
29
25

score 2 · Answer 3 · answered Mar 21 '18 at 07:38

If you work in no-conflict mode (i.e. out of global scope), one of the possibilities is:

jQuery.noConflict();

(function ($) {
    $('#button').on('click', myFunction);
}(jQuery));

// or
jQuery('#button').on('click', myFunction);

function myFunction() {
    var that = jQuery(this);
    console.log(that);
}

score -1 · Answer 4 · answered May 29 '19 at 11:43

You can pass the id to the function. With your loop inside the function.

myFunc(this.id);

function myFunc(thisid) {
    $("#" + thisid).parent().parent().children().each(function(){
        // do something
    });
}

I would normally do the loop outside the function like below:

$(this).parent().parent().children().each(function(){
    myFunc(this.id)
});

function myFunc(thisid) {

    // do something example
   $("#" + thisid).html("Yay, i changed the html for element: " + thisid);
}

jQuery Passing $(this) to a Function

4 Answers4

Linked