Praktische Anwendungen für jQuery ' s $().each () - Methode für eine Präsentation

Gebe ich eine Präsentation zu einigen Mitarbeitern heute auf, wie jQuery mit ColdFusion. Dies ist mehr eine Einführung in jQuery als eine erweiterte Sitzung. Ich bin versucht zu zeigen, wie man Schleife mit jQuery ' s $().each () - Methode, und bei dem Versuch zu kommen mit einigen praktischen, realen Welt Beispiele dafür, und ich habe gezeichnet, der leere. Irgendwelche Vorschläge?

InformationsquelleAutor Hooray Im Helping | 2009-05-14

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

InformationsquelleAutor Matt Briggs

4

Überspringen. Es wäre verwirrend für neue Benutzer, wie auch immer. jQuery gibt arrays von Objekten und wendet die Funktion ruft zu jeder bereits, was nicht offensichtlich für den noob. Verbringen Sie Zeit auf each() und dann bekommt man von Menschen zu tun $('a').each().css("color", "red"); oder $('a').each(function(){ $(this).css("color", "red");});

Fragen Sie nicht, wie ich weiß, noobs zu begegnen .jedes (ist) könnte am Ende machen diesen Fehler.

hängt davon ab, welche Sprache Sie aus. in ruby .jeder ist die bevorzugte Art und Weise zu tun, eine foreach-Schleife.
Es gibt mehrere wertvolle verwendet .each () - Methode, die Sie nicht tun können, mit nur einem Selektor. Zugegeben, es ist fast immer am besten zu verwenden ist einfach-Selektoren, wenn möglich, aber, das seine nicht immer machbar. Matt Briggs stellt einen sehr praktischen Anwendungsfall, in dem die Verwendung von nur einem Selektor wäre im Grunde unmöglich (ohne die Erstellung Ihrer eigenen Selektor... in dem Fall würden Sie wahrscheinlich verwenden .each () - in).

InformationsquelleAutor Will
3

Überprüfen Sie alle Checkboxen in einem datagrid auf der Basis des Wertes von einigen externen checkbox
```
$('#<%=dgMyDataGrid.ClientID %> :checkbox').each(function(i)
{
this.checked = $(#SelectAll).is(":checked")
});
```
Ursprünglich hatte ich den code hinter findcontrol () - Methode anstelle des #SelectAll, aber hoffentlich veranschaulicht, was ich versuche zu tun. Diese Funktion wurde auch an das click-Ereignis der #SelectAll.

(auch lassen Sie es werden darauf hingewiesen, dass ich ein jQuery-Neuling!!!)

edit: die vollständige Umsetzung von dem, was ich verwendet diese für ist hier wenn jemand interessiert ist 🙂

Dies ist ein gutes Beispiel! Danke!
Hurra ich bin zu helfen! 🙂 habe einen link zu dem code, wie ich es verwendet, wenn Sie interessiert sind.

InformationsquelleAutor RYFN

Verwendung von each() in JQuery

Sehen Sie meinen Versuch, auf eine sehr einfache 'mehr/weniger' erweiterbare Zeitung Spalte code.
Hier ist der code, der verwendet die each () - Funktion. Ich habe gearbeitet um es einfach zu halten - nicht Zähler, keine Speicherung im var, und keine Verwendung von index, hier ist der code:

Siehe Wohn-demo und source code auf meiner website Hier bei 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 */

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

Ich habe versucht, es so einfach wie möglich durch die Verwendung von each().

John Guise

InformationsquelleAutor John Guise

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.