RyanDev.com

The jQuery contains and not functions are great for doing conditional formatting.  Along with the power of chaining in jQuery you can easily change the look of something in the browser window through a simple jQuery call.

For example, suppose you have a grid view and you are grouping by a certain column and you need each group to total 100% in one of its columns.  (Note: I am not going into detail of which grid view control you use.)  You could do these 2 lines of code:

1. $(”tr[type=TotalRow]:contains(’100.00%’)”).addClass(”Valid”);
2. $(”tr[type=TotalRow]:not(:contains(’100.00%’))”).addClass(”Invalid”);

• $(”tr[type=TotalRow] - This will select all table rows that have an attribute named type which has a value of TotalRow.
• :contains(’100.00%’)”) - This will further filter the list of table rows returned by ensuring that they have the text ‘100.00%’ in them.
• .addClass(”Valid”); - This adds a CSS class of name ‘Valid’ to every table row that met the criteria.  In this case, every table row that has an attribute named type and a value of TotalRow as well as having the text 100.00% will have the ‘Valid’ CSS class applied to it.

The second line of code simply uses the not function so that it finds any table row that IS of type TotalRow and that does NOT have 100.00% in the row somewhere and then adds a CSS class named Invalid.

Pretty simple and easy to do.

The jQuery .each() function is a great way to iterate over elements and even perform a function against them.  For example, if you have a web form that has multiple iFrames and you want to validate each of the forms all at once you can do the following jQuery call.     $(“iframe”).each(function(index) { try { this.contentWindow.Validate(); } catch (e) { } });1. $(”iframe”) - will select all iFrames in a given page.2. .each() - calls a function for each iFrame3. “this” inside of the each() function actually refers to the iFrame in this case.4. function(index) { try { this.contentWindow.Validate(); } catch (e) { } } - This accesses the actual page of each iFrame by calling contentWindow and then the name of the function Validate.  This means that each page that is loaded in an iFrame has its own Validate JavaScript function either directly or through an includes file.5.The call to Validate() is inside a try/catch block in the event that one of the pages may not have a Validate event.  That will throw an Exception which is not important for this example.

As a new user of jQuery I find the syntax very hard to follow.  From some of the samples I have worked with it is extremely powerful.  Microsoft has announced plans to support and contribute to the jQuery effort.  That is great news and I believe that will mean better integration into Visual Studio and IntelliSense making jQuery much easier to use.