对jQuery的$实际用途（）进行演示。每个（）方法

Question

今天我给如何使用jQuery使用ColdFusion介绍一些同事。这更是一个介绍jQuery的不是先进的会话。我想展示如何使用jQuery的$（）。each（）方法可以一个循环，并在试图拿出一些实际的，现实世界的例子，我已经得出一个空白。任何建议？

Answer 1

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

Answer 2

跳过它。这将会是令人困惑的新用户，无论如何。 jQuery的返回对象的数组和适用功能已经调用到每个，这不明摆着的菜鸟。你会花时间对每个（）和所有你得到它的人谁做$('a').each().css("color", "red");或$('a').each(function(){ $(this).css("color", "red");});

不要问我是怎么知道的菜鸟遇到。每个（）最终可能会犯这个错误。

Answer 3

检查所有复选框在数据网格基于一些外部复选框的值

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

我本来到位#SelectAll背后的FindControl（）方法的代码，但是这个希望说明了什么，我试图做的。该功能也被结合到#SelectAll的单击事件。

（也让它指出的是，我是一个jQuery新手！）

编辑：全面实施的是我用这个的是这里如果有人有兴趣：）

Answer 4

在JQuery中使用的每个（）

您可以看到我的一个非常简单的“多/少”扩张报纸专栏代码的尝试。 这里是使用了各（）函数的代码。我一直在努力保持它的简单 - 非专柜，在VAR没有存储也没有用指标，这里是代码：

请参阅生活演示和源代码在我的网站在这里，在马尼萨Turiksh

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

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

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

我已经尝试通过使用每个（）以保持它尽可能地简单。结果， 约翰吉斯