Practical Uses for jQuery's $().each() method for a presentation

Question

I'm giving a presentation to some coworkers today on how to use jQuery with ColdFusion. This is more of an introduction to jQuery than an advanced session. I'm trying to show how one can loop using jQuery's $().each() method, and in trying to come up with some practical, real world examples and I've drawn a blank. Any suggestions?

Solution 1

// changes every other div green
$("div").each(function(i) { if (i % 2) this.style.backgroundColor = "green"; });

Solution 2

Check all checkboxes in a datagrid based on the value of some external checkbox

$('#<%=dgMyDataGrid.ClientID %> :checkbox').each(function(i)
{
this.checked = $(#SelectAll).is(":checked")
});

I originally had a code behind findcontrol() method in place of the #SelectAll, but this hopefully illustrates what I was trying to do. This function was also bound to the click event of #SelectAll.

(also let it be noted that I am a jQuery newbie!)

edit: full implementation of what I used this for is here if anyone is interested :)

Solution 3

Use of each() in JQuery

You can see my attempt at a very simple 'more/less' expandable newspaper column code. Here is the code which uses the each() function. I have worked to keep it simple - non counters, no storing in var and no use of index, here is the code:

See living demo and source code at my website Here at Manisa Turiksh

JQ Code

$(document).ready(function(){
$(".expand").each(function() {
$('p', this).hide(); //hide all p's for each div class=expand
$('p:first', this).show(); //show only first p in each div
$('.more',this).show(); //show more link belw each div
});

$('.more').toggle( 
    function() { 
    $(this).prevAll().show(); // toggle on to show all p's in div id=expand selected by this id=more
    $(this).html('less..'); //change legend to - less - for this id=more when div is expanded
    }, 
    function() {
    $(this).prevAll().not('p:last,h3').hide(); //hide all p's except first p, counts backwards in prevAll and reshow header h3 as it was hidden with prevAll
    $(this).html('more..'); //change legend to - more - for this id=more when div is collapsed
    });
});

CSS code

body {font-family:calandra;font-size:10px;}
.expand {width:17%;margin-right:2%;float:left;} /*set div's as newspaper columns */
p {display:block;} /*always display p's when JS is disabled */
.more{color:red;display:none;} /*never display a's when JS is disabled */

Some html code

<div class="expand">

<h3>Headine 1</h3>

<p>1.A paragraph typically consists of a unifying main point, thought, or idea accompanied by supporting details. The non-fiction paragraph usually begins with the general and moves towards the more specific so as to advance an argument or point of view.</p>

<p>2. Each paragraph builds on what came before and lays the ground for what comes next. Paragraphs generally range three to seven sentences all combined in a single paragraphed statement. In prose fiction successive details, for example; but it is just as common for the point of a prose paragraph to occur in the middle or the end.</p>

<p>3 A paragraph can be as short as one word or run the length of multiple pages, and may consist of one or many sentences. When dialogue is being quoted in fiction, a new paragraph is used each time the person being quoted changed.11</p>

<p>4 The last paragraph</p>

<a  href="#" class="more">more</a>

</div>





<div class="expand">

<h3>Headine 2</h3>

<p>Amet vestibulum. Nisl a, a eros ut, nec vivamus. Tortor nullam id, metus ut pretium. Amet sociis. Ut justo. Amet a est, dolor integer, purus auctor pretium.</p>

<p>Libero sapien sed, nulla nullam. Porta tincidunt. Suspendisse ante ac, eget fermentum vivamus. Ipsum sapien placerat. Adipiscing lorem magna, urna tortor dictum.</p>

<p>Fringilla a morbi, sed sollicitudin magna. Justo et in, sem aenean, molestie integer tincidunt. Magna quo, erat odio. Posuere enim phasellus, dui pede. Sit a mauris, metus suscipit.</p>

<p>Lobortis et, pellentesque nec, suspendisse elit quisque. Justo vestibulum debitis, augue fermentum. Orci et id. Ut elit, tortor ut at. Eum et non, faucibus integer nam, ac ultrices augue.</p>

<p>Ultricies magnis, velit turpis. Justo sit, urna cras primis, semper libero quam. Lectus ut aliquam. Consequat sed wisi, enim nostrud, eleifend egestas metus. Vestibulum tristique. Et erat lorem, erat sit.</p>

<p>Aliquam duis mi, morbi nisl. Rhoncus imperdiet pede. Sit et. Elit fusce, feugiat accumsan incididunt. Nec ipsum feugiat, accumsan dictum massa. Nec sit.22</p>

<a  href="#" class="more">more</a>

</div>

I've tried to keep it as simple as possible by using each().
John Guise

Comments

[Hooray Im Helping]

This is a great example! Thanks!

[RYFN]

Hooray I'm helping! :) added a link to the code as I used it if you're interested.