JQuery Tip – 2: filter vs find

Those of us who are already familiar with JQuery would have been taken aback with the breadth of available selectors. Instead of boring you through the list of already familiar JQuery selectors, I thought of comparing the two JQuery selectors (functions) Filter and Find in this blog. I got this intent, since JQuery doc for filter too doesn’t have this subtle difference, IMHO.

                Most of us who have read through filter doc would know that filter could take either an expression or a function as parameter unlike find which could take only an expression.

                Apart from the above, the main point or the one that confused me is find will select elements only if,

  1. It matches the given criteria
  2. The element is descendant of any one of the element, that is part of the already selected wrapped set

But filter will select an element if

  1. It matches the given criteria
  2. The element is already part of the wrapped set

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <title>Filter vs Find</title>

  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

</head>

<body>

    
<div id="justlikethat" class="justlikethat">

         <button name="mybutton" type="button">Click Me !!</button>

    </div>
</body>

</html>

Let’s take the above HTML snippet to delve further,

                $(‘div’).find(‘:button’) – Will select “mybutton”, since “mybutton”  will satisfy the selector query passed to find i.e. :button and it is also descendant of the already selected div.

                $(‘div’).filter(‘:button’) – Will return none, because there is no element that satisfies the selector query, :button in the wrapped set return by $(‘div’) (which will be only div element(s))

                $(‘div :button’).filter(‘:button’) – Will select “mybutton”, since mybutton will satisfy the selector query passed to filter i.e. :button and also it is part of the wrapped set returned by $(‘div :button’)

Similarly,  $(‘div :button’).find(‘:button’) – Will return none. Hope you can understand the reason!!

For more reading on this topic, How to Get Anything You Want – part 2

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Furl

About these ads

2 Responses

  1. Thank you very much. Nice explanation.

  2. I want know one thing the JQGRID for php is opensource / shared version. pl explain me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: