Apps optimize

How to use filter functions in jQuery

Ryan Boudreaux continues his jQuery tutorial here with examples of how to use the filter functions and how to change an object's content text using the text function.

Continuing in our jQuery tutorial, I will demonstrate filter functions with two examples, and then I'll show you how to change an object's content text.

If you have missed the first two parts of the Introduction to jQuery series, be sure to check them out first, as they set the foundation for the continuation of steps, we will take in this segment:

A download of all of the HTML, CSS style, image, and script files you'll need to follow along with this tutorial are updated for this installment here.

Filter Functions .filter( selector )

When you want to reduce the set of matched elements to those that match the selector or pass the function's test, you want to use the .filter(selector), where the selector is a string containing an expression to match the current set of elements against. The filter function also takes on other forms such as:

  • .filter( function(index) ) -- where a function is used as a test for each element in the set
  • .filter( element ) -- where an element is used to match the current set of elements against
  • .filter( jQuery object ) -- where an existing jQuery object is used to match the current set of elements against

All filters begin with a colon, such as :first, :last, :even. The short list of filter elements below are used to refine matches with certain conditions as found in the table below:

Filter Description
:first Selects the first matched element of the selector's returned set
:last Selects the last and single instance of the element matching the selector's returned set
:even Selects the even elements with a zero-based index within the matched set
:odd Selects the odd elements with zero-based indexing within the matched set
:eq(index) Select the element that is equal to the given index n within the matched set
:gt(index) Select all elements that are greater than the given zero-based index within the matched set
:lt(index) Select all elements that are less than the given zero-based index within the matched set
:animated Selects all elements that are currently being animated at the time the selector is run
:header Selects all header elements (H1...H6)
:not Select all elements that do not match the given selector
:checkbox Select all elements that match the type checkbox
:contains(text) Select a string of text (case sensitive)
:disabled Selects all elements that are disabled
:enabled Selects all elements that are enabled
:file Selects all elements of a certain file type

In this example, I will demonstrate the :even filter and then the :odd filter, where the :even filter will be used to add in a background style to the evenly matched list items in an unordered list, and the :odd filter will be used to style the background for every odd row in a table, which is also known as the "zebra" table effect.

First, we will demonstrate the use of the :even filter selector with a switch to toggle the background style for the matched set of elements. First we will add in the following HTML code to our index.html. We are still building on the same HTML file from the previous two installments of the jQuery series.

   <section id="lists">
       <ul class="itemlist">
          <li>Item 0</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
          <li>Item 7</li>
      </ul>
    <input type="button" id="list" value="Even Listed Items" />
   </section>

And, now we will add the following lines of jQuery inside the document event function of the index.html file:

$('#list').click(function () {
  $('ul.itemlist li:even').toggleClass('even');
});

Next, we will add in the following styles to the styles.css file:

#lists {
     width:400px;
     border: 2px solid #C63;
     padding:5px;
     margin-top:20px;
}
.even {
     background: #CFC;
}
Be sure to save the files, then open the index.html file in your browser, and then click on the Even Listed Items button. You will see that the even listed items are now rendered with a light green background; click again, and the background reverts to none. The example list is displayed below in Figures A and B as displayed in Chrome 17.0.9 in:

Figure A

Figure B

jQuery has many other selectors that can be utilized in varying ways, for example, to automatically style tables with every other row assigned a different styling, such as background style.

Add this jQuery code into the document event handler within the <script> area of index.html:

     $('table.odd_row tr:odd').addClass('odd_row');

With this styling added into the styles.css:

tr.odd_row {
     background: #CDCDCD;
}

Add the following snippet to the index.html file, which will produce the table below with eight rows:

<section id="tables">
     <table class="odd_row">
       <tbody>
         <tr>
           <th>Row 0</th>
           <th>Column</th>
           <th>Column</th>
         </tr>
         <tr>
           <td>Row 1</td>
           <td>Column</td>
           <td>Column</td>
         </tr>
          .
          .
       </tbody>
     </table>
</section>
If you are following along with the coding of the demonstrations, be sure to save your index.html, and styles.css files, then refresh your browser to view. The results of this table view are displayed in Chrome 17.0.9 in Figure C:

Figure C

Change an object's content text

Maybe you have an alert message that needs to be updated, and the change is applied in multiple locations across your website. With jQuery you only have to make the text entry once, and it gets applied automatically to the matched set of elements with the .text(textString) function. The .text() function can be used in both XML and HTML documents.

In the index.html file, add in this line of jQuery code just below the previous line we added and inside the document ready function:

$(".test").text("Alert: This is the new text content!");

Save the file, then refresh the page in your browser, and you will see that the content text for the article and section with the class="test" were updated with the new text: "Alert: This is the new text content!." jQuery does all the work of applying the text update across all elements with the defined class. Imagine if this was an update for 100+ objects -- the effect is the same and immediate across the site.

The resulting document as displayed in Chrome 17.0.9 is shown in Figure D:

Figure D

In the next installments of the jQuery series, we will review changing the appearances of objects with the show and hide functions, and finally, we will create an accordion effect for an FAQ document using the power of jQuery.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments