this, current context-when should I use in jQuery?

Question

Hi All, I am not very sure with the use of "this" [current context] in jquery.What I know is- it prevents the dom from searching all the elements, it just work on that current element, which improve performance[correct me if I am wrong].Also I am not sure when to use this and when not. lets say, should I go for

  $("span",this).slice(5).css("display", "none")

or

 $("span").slice(5).css("display", "none")

both will work, but I am not very clear as how really it works.can somebody explain it with a diff/proper example, and when to use what? [EDIT]

      $(function() {
        $("#clickme").click(function() {
            $("span",this).slice(5).css('display', 'block');//doesn't work ? why?
             $("span").slice(5).css('display', 'block');//works..why?

        });
    });
enter code here <span id="clickme">Click me</span>
                 <span>itam1</sapn>
                <span>itam2</sapn>
                <span>itam3</sapn>
                 <span>itam4</sapn>
                    <span>itam5</sapn>
                    ...upto10

Answer 1

Usually you can use the this keyword on event handlers since it will be a reference to the element that triggered the event and other jQuery functions like $.each.

For example when handling a click event lets say:

$('.parentElement').click(function () {
  $('.foo', this).hide();
});

The above code, will hide all the elements with class foo that are descendants of the currently parentElement that was clicked.

The use of the context argument of the jQuery function is the equivalent of making a call to the find method:

$(expr, context);
// is just equivalent to:
$(content).find(expr);

EDIT: Looking at your example:

    $("#clickme").click(function() {
      $("span",this);//... (1)
      $("span");//..       (2)
    });

The first line, will look for all the span elements that are inside of #clickme (its descendants), since that element was the one that triggered the click event.

The second line, will look for all the span elements on the whole page.

Answer 2

How it works

Lets use this HTML for the examples:

<div id="container">
   <div class="column"><a href="#">Link 1</a></div>
   <div class="column"><a href="#">Link 2</a></div>
</div>
<div id="footer">
   <a href="#">Link 3</a><a href="#">Link 3</a>
</div>

The scoping parameter of the jQuery function should only be used if you already have a cached reference to a DOM element or jQuery wrapped element set:

var $set = $('#container');
$('a', $set).hide(); // Hides all 'a' tag descendants of #container

Or in an event:

$("#container").click(function(e){
   $('a', this).hide(); // Same as call above
}

But it makes no sense to use it like this:

$('a', '#container').hide()

When it should be written like this:

$('#container a').hide();

Having said all that, it is generally cleaner and clearer to just use .find() instead of using the second parameter in the jQuery function if you already have the jQuery or DOM element. The first example I gave would be written this way instead:

var $set = $('#container');
$set.find('a').hide(); // Hides all 'a' tag descendants of #container

If this one call was the only reason you grabbed the #container object, you could also write it this way since it will still scope the search to the #container element:

$("#container a").hide(); // This is the same as $('a', "#container");

Why would you scope your selections

When jQuery looks for an unscoped selector, it will search through the entire document. Depending on the complexity of the selector, this could require a lot of searching. If you know that the element you are looking for only occurs within a specific parent, it will really speed up your code to scope the selection to that parent.

Regardless of what method of scoping you choose, you should always scope your selectors whenever possible.