Usos práticos para $ do jQuery (). Cada método () para uma apresentação
Pergunta
Eu estou dando uma apresentação para alguns colegas de trabalho de hoje sobre como usar jQuery com ColdFusion. Esta é mais uma introdução ao jQuery de uma sessão avançada. Estou tentando mostrar como um loop pode utilizar $ jQuery (). Cada método (), e na tentativa de chegar a alguns exemplos práticos, mundo real e eu desenhei um em branco. Alguma sugestão?
Solução
// changes every other div green
$("div").each(function(i) { if (i % 2) this.style.backgroundColor = "green"; });
Outras dicas
Pule. Seria confuso para os novos usuários, de qualquer maneira. jQuery retorna arrays de objetos e aplica chamadas de função para cada já, que não é óbvio para o Noob. Você vai gastar tempo em cada () e tudo o que você vai obter a partir dele é que as pessoas que fazem $('a').each().css("color", "red");
ou $('a').each(function(){ $(this).css("color", "red");});
Não me pergunte como eu sei noobs encontrando .each () pode acabar fazendo este erro.
Verifique todas as caixas em um datagrid com base no valor de algum caixa externa
$('#<%=dgMyDataGrid.ClientID %> :checkbox').each(function(i)
{
this.checked = $(#SelectAll).is(":checked")
});
Eu originalmente tinha um código por trás método FindControl () no lugar do #SelectAll, mas isso espero que ilustra o que eu estava tentando fazer. Esta função também foi ligado ao evento clique de #SelectAll.
(também note-se que eu sou um novato jQuery!)
edit: a plena implementação do que eu usei isso para é aqui se alguém estiver interessado:)
Use of each () em JQuery
Você pode ver a minha tentativa de uma forma muito simples 'mais / menos' código de coluna de jornal expansível. Aqui está o código que utiliza a função each (). Eu tenho trabalhado para mantê-lo simples - não contadores, sem armazenamento em var e sem uso de índice, aqui está o código:
Veja a demo e código fonte vivendo no meu site Aqui no Manisa Turiksh
Código 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
});
});
código 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 */
Algumas código 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>
Eu tentei mantê-lo o mais simples possível, utilizando each ().
John Guise