Pratique pour les utilisations de la méthode de $ jQuery (). Each () pour une présentation

Question

Je donne une présentation à certains collègues aujourd'hui sur la façon d'utiliser jQuery avec ColdFusion. Ceci est plus d'une introduction à jQuery que d'une session avancée. Je suis en train de montrer comment une boucle peut en utilisant $ () jQuery. Chaque méthode (), et en essayant de trouver des exemples du monde pratique, réel et je l'ai fait chou blanc. Toutes les suggestions?

Answer 1

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

Answer 2

Skip it. Il serait source de confusion pour les nouveaux utilisateurs, de toute façon. jQuery retourne les tableaux d'objets et applique des appels de fonctions déjà, ce qui est évident pour le Noob. Vous passerez du temps sur chaque () et tout ce que vous obtiendrez de ce sont les gens qui font ou $('a').each().css("color", "red"); $('a').each(function(){ $(this).css("color", "red");});

Ne demandez pas comment je sais noobs .each rencontrant () pourrait finir par faire cette erreur.

Answer 3

Vérifiez toutes les cases dans une grille de données en fonction de la valeur d'une case à cocher externe

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

J'ai eu à l'origine un code derrière méthode FindControl () à la place du #SelectAll, mais cela illustre ce que je je l'espère en train de faire. Cette fonction a également été lié à l'événement click #SelectAll.

(LET aussi noter que je suis un débutant jQuery!)

modifier: la mise en œuvre complète de ce que j'utilisé ce pour est si quelqu'un est intéressé:)

Answer 4

Utilisation de chaque () dans JQuery

Vous pouvez voir ma tentative très simple « plus / moins » code extensible colonne de journal. Voici le code qui utilise la fonction each (). Je travaille à garder les choses simples - compteurs non, pas de stockage dans var et aucune utilisation de l'indice, voici le code:

Voir la démo et le code source de vie sur mon site Ici, à Manisa Turiksh

Code de JQ

$(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
    });
});

code CSS

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 */

code HTML

<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>

J'ai essayé de le garder aussi simple que possible en utilisant each ().
John Guise