jquery grep()

 JQuery  No Responses »
Jan 072013
 

In questo post cercheremo di illustrare la funzione grep() di jQuery che serve per fare delle ricerche all’interno di un array avendo come risultato un nuovo array.
Nell’html della pagina prepareremo due semplici contenitori, uno per il primo array e uno per il secondo array che contiene i nomi dei mesi che al loro interno hanno la lettera r.


La funzione grep()
 <h2>I mesi</h2>
 <h2>Mesi che nel nome contengono la lettera r</h2>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
 ...
</script>

La parte centrale del nostro esercizio è costituita dallo script dove abbiamo la definizione dell’array dei mesi, la funzione grep che creerà  l’array rInMonth andando a cercare dentro l’array arr i nomi che hanno almeno una r, il risultato sarà  un altro array.
A questo punto sarà sufficiente iniettare nei due contenitori con il metodo html gli elementi dell’array uniti a un br

 $(document).ready(function() {
 var arr = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre',  'Novembre', 'Dicembre'];
 var rInMonth = $.grep(arr, function(value, index) {return value.indexOf('r') >= 0;});
 $('#all-months').html(arr.join('
 '));
 $('#vitamin').html(rInMonth.join('
 '));
 });

L’esempio

 Share

jQuery index

 JQuery  No Responses »
Jan 042013
 

In questo breve post vedremo la funzione index che useremo per farci restituire l’indice dell’elemento su cui faremo click. Prepareremo quindi una pagina html con 5 paragrafi:


<!DOCTYPE html>
<html lang="en">
<head>
<title>La funzione index()</title>
</head>
<body>
<h1>Fai click sul paragrafo per vedere l'indice dell'elemento</h1>
<p>Primo</p>
<p>Secondo</p>
<p>Terzo</p>
<p>Quarto</p>
<p>Quinto</p>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
...
</body>
</html>

Tramite il nostro jQuery andremo ad associare il click sui paragrafi alla visualizzazione di un alert che mostrerà l’indice dell’elemento su cui abbiamo cliccato (this)


<script>
$(document).ready(function() {
$('p').click(function() {
alert('L\'Indice del paragrafo clickato: ' + $(this).index())
});
});
</script>

L’esempio

La funzione index()" data-image="" data-button=""> Share

jQuery array con map()

 JQuery  No Responses »
Jan 022013
 

Una funzione di jQuery per manipolare gli array è map().

map() dovrebbe essere utilizzato al posto di each ogni volta che vogliamo restituire un array, per esempio per convertirlo in una stringa JSON.

Iniziamo dall’html:

<!DOCTYPE html>
<html lang="it">
<head>
<title>La funzione map()</title>
</head>
<body>
<h2>Esempio d'uso della funzione map()</h2>
<p id="before">Prima di map():</p>
<p id="after">Dopo map():</p>
</body>
</html>

Nel codice javascript prepariamo un array e lo stampiamo come JSON,

successivamente lo manipoliamo con map() e lo ristampiamo sempre con JSON


<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
var arr = [1, 2, 3, 4, 5];
$('#before').append(JSON.stringify(arr));
arr = $.map(arr, function(value, index) {
return 'fai qualcosa con ' + value;
});
$('#after').append(JSON.stringify(arr));
});
</script>

L’esempio

" data-image="" data-button=""> Share

jQuery: ciclo each su un array

 JQuery  No Responses »
Dec 302012
 

Una delle basi necessarie per lavorare agevolmente con jQuery è padroneggiare gli array. In questo esempio vedremo come aggiungere alla pagina gli elementi dell’array scorrendolo tramite un ciclo each.

Partiamo dall’html:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>La funzione each()</title>
 </head>
 <body>
 <h2>Questo esempio mostra come usare la funzione each() per appendere una lettera prima di ogni paragrafi</h2>
 <p>Primo</p>
 <p>Secondo</p>
 <p>Terzo</p>
 </body>
 </html>

Lo script verrà  aggiunto alla fine dell’html prima della chiusura del tag body: questo darà  come vantaggio un più veloce rendering dell’html senza attendere il download delle risorse altrimenti poste nel tag head.

 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
 $(document).ready(function() {
 var values = ['a', 'b', 'c', 'd'];
 });
 </script>

Posizionarci alla fine dell’html non ci dispensa dall’utilizzare il $(document).ready
L’ideale sarebbe mettere tutto questo codice in un file esterno.
Dichiarato l’array, possiamo procedere con il primo ciclo:

 $.each(values, function(index, value) {
 values[index] = value.toUpperCase();
 });

Con questo ciclo trasformamo in lettere maiuscole gli elementi del nostro array,
l’esempio evidenzia sia l’indice del ciclo, sia l’elemento (value) in esame nello step.

Il secondo ciclo aggiunge un trattino prima di ogni paragrafo, infatto si tratta di un ciclo sui ‘p’:

 $('p').each(function(index, el) {
 $(el).prepend(' - ');
 });

Infine il terzo ciclo, sempre sui paragrafi, aggiunge l’elemento preso dall’array:

 $('p').each(function(index) {
 $(this).prepend(values[index]);
 });

L’esempio

" data-image="" data-button=""> Share