Tag: narrow selection

jQuery Filter Methods To Narrow Selection

In this video tutorial we illustrate the use of jQuery filter methods to narrow our selection.

The 6 jQuery filter methods are:
first()
last()
eq()
slice()
not()
filter()

In this example, we take some list of images and using CSS we make the display property to none. Hence hiding all the images from being displayed.
Using filter methods we write our jQuery script to fetch elements(images).

HTML code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<html>
 <head><title>Filter Methods to narrow the selection!</title>
 
  <style type="text/css">
   li {
    display: none;
   }
  </style>
 
 </head>
 <body>
    <ol>
      <li>
         0<img src="images/aperture.png" width="79" height="79" />
      </li>
      <li>
         1<img src="images/coda.png" width="79" height="79" />
       </li>
      <li class="no">
         2<img src="images/finder.png" width="79" height="79" />
      </li>
      <li>
         3<img src="images/photoshop.png" width="79" height="79" />
      </li>
      <li class="no">
         4<img src="images/safari.png" width="79" height="79" />
      </li>
    </ol>
 
    <button>Display!</button>                
 
   <script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="script/my_script.js"></script>
 </body>
</html>

Here we have 1 button and 5 images. Images being numbered from 0 to 4.
Two of the list items have a class name of no.

jQuery code: first()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().first().css( 'display', 'inline' );
  });
 
});

Here we are using chain methods and DOM Tree Traversal.
Also CSS method of jQuery. Also watch jQuery Methods and CSS: Restaurant Application

Here, we select ol tag and fetch all its children, and inturn select its first child, to which we apply the css property of display to inline.

Similarly,

jQuery code: last()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().last().css( 'display', 'inline' );
  });
 
});

Here, we select ol tag and fetch all its children, and inturn select its last child, to which we apply the css property of display to inline.

jQuery code: eq()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().eq(4).css( 'display', 'inline' );
  });
 
});

Here, we select ol tag and fetch all its children, and inturn select its 4th child using its index number, to which we apply the css property of display to inline.

jQuery code: slice()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().slice(1, 4).css( 'display', 'inline' );
  });
 
});

Here, we select ol tag and fetch all its children, and inturn select its children from index 1 to 4 i.e., image 1, 2 and 3, to which we apply the css property of display to inline.

jQuery code: not()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().not(".no").css( 'display', 'inline' );
  });
 
});

Here, we select ol tag and fetch all its children, and inturn select its children which do not have the class name no i.e., image 0, 1 and 3, to which we apply the css property of display to inline.

jQuery code: filter()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().filter(".no").css( 'display', 'inline' );
  });
 
});

This is opposite of not() method.
Here, we select ol tag and fetch all its children, and inturn select its children which has the class name no i.e., image 2 and 4, to which we apply the css property of display to inline.

Video Tutorial: jQuery Filter Methods To Narrow Selection


[youtube https://www.youtube.com/watch?v=DGoCpgi1LK4]

YouTube Link: https://www.youtube.com/watch?v=DGoCpgi1LK4 [Watch the Video In Full Screen.]



These are the 6 filter methods of jQuery, using which we can narrow down our selection.

I’m using images to make sure the learning stays colorful and not pale boring text. These filter methods will come in handy in later stages wherein we under take some complex application developments. These type of methods save us time and the number of line of code, to achieve the same thing manually.