Info line: +39 02.95382727
web@effettispeciali.com
  • Home
  • Servizi
  • Siti web a Milano
  • Contatti
Effetti Speciali Web AgencyEffetti Speciali Web AgencyEffetti Speciali Web AgencyEffetti Speciali Web Agency
  • Home
  • About
  • Servizi
  • Portfolio
  • Blog
  • Contatti
    Home jQuery Pillole di jQuery – loop e dintorni
    NextPrevious

    Pillole di jQuery – loop e dintorni

    By Mister Web | jQuery | 0 comment | 15 Aprile, 2017 | 1

    Usare i loop per manipolare gli elementi di una pagina

    C

    on l’immancabile manuale “JQUERY COOKBOOK” della O’REILLY, sempre presente sulle nostre postazioni di lavoro, ecco alcuni esempi e spunti di utilizzo dei loop con jquery.

    Il metodo each()

    Il metodo each() consente di eseguire cicli per svariati possibili utilizzi, come ad esempio popolare array di dati prelevando il contenuto di alcuni tag o attributi, oppure costruire codice run-time e assegnare metodi a gestori di eventi come dei link.

    Per esempio, supponendo di avere un div con id=”cont” che contenga una serie di link:

    Popolare un array prelevando dati da un attributo in un set
    var listaUrl=[];
    $(“div #cont a[href]”).each(function(i){
    listaUrl[i]=$(this).attr(‘href’);
    });
    Utilizzare il metodo .eq() per individuare specifici elementi di un set

    Il metodo .eq() è utile per rintracciare uno specifico elemento in un set, nel caso in cui se ne conosca la posizione.
    L’argomento che gli viene passato è l’indice di un set di elementi (a base zero come gli array)

    Esempio (rintraccio il secondo elemento della lista con id cont e gli cambio di colore):

    $(“ul#cont >li”).eq(1).css(“color”, “#990000”);

    Ottenere una lista “rovesciata”

    Questo sistema consente di invertire gli elementi di una lista:

    codice html:

    < ul id=”lista” >
    < li >aaa< / li >
    < li >bbb< / li >
    < li >ccc< /li >
    < li >ddd< /li >
    < / ul >

    ////js

    var invertita=$(“ul#lista li”).get().reverse();

    $(“ul#lista”).empty();
    $.each(invertita, function(i){
    $(“ul#lista”).append(“< li >”+ invertita[i].innerHTML+”< / li >”);

    Tracciare l’indice di un elemento cliccato in un set con relativo valore

    In questo esempio si utilizza il metodo .index()

    codice html:

    < ul id=”lista” >
    < li >aaa< / li >
    < li >bbb< / li >
    < li >ccc< /li >
    < li >ddd< /li >
    < / ul >

    ////js

    $(“#lista li”).click(function(){
    //alert(“click: “+$(“#lista li”).index(this));
    alert($(“#lista li”).index(this)+” : “+$(this).html());
    })

    Ad ogni click sui singoli elementi della lista ottengo indice e contenuto.
    Questa tecnica potrebe tornare utile per esempio se vogliamo associare delle azioni a seconda della posizone dell’elemento o del suo contenuto….

    Estrarre dati da un set

    In questo esempio creiamo un array estraendo i dati da una lista a condizione che il suo indice sia minore di 2

    codice html:

    < ul id=”lista” >
    < li >aaa< / li >
    < li >bbb< / li >
    < li >ccc< /li >
    < li >ddd< /li >
    < / ul >

    ////js

    var newLista=[];
    $(“#lista li”).each(function(i){

    if($(“#lista li”).index(this)<2){

    //alert($(this).html())
    newLista.push($(this).html());
    alert(newLista);
    }

    See you soon!

    Photoshop

    Mister Web

    Specialità: Trasformare il tuo sito in uno strumento facile da navigare e bello da vedere!

    More posts by Mister Web

    Leave a Comment

    Annulla risposta

    Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

    Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

    NextPrevious

    Articoli recenti

    • Come scegliere un dominio per il tuo sito web?
    • Jetpack, creare un newsticker dei post più visti
    • Contact Form 7: inviare mail all’autore del post
    • Woocommerce: aggiungere bottone e descrizione alle categorie nella Pagina Shop
    • Alternative a Google Maps

    I più letti

    Creare mappe personalizzate con Google My Maps
    Iperius Remote, una valida alternativa a TeamViewer
    Archiviare la posta IMAP in locale rimuovendola dal server

    Categorie

    • Applicazioni & Software
    • Bullshit
    • CSS – HTML
    • Email
    • Google Tag Manager
    • jQuery
    • Photoshop
    • Servizi hosting
    • Wordpress

    Digital Artistis

    • Carlos Cabrera
    • Daniel Dociu
    • Jesse van Dijk
    • Melissa Clifton
    • Michael Kutsche
    • Teodoru Badiu

    RSS Tutorialzine

    • 10 Amazing JavaScript Games In Under 13kB of Code

    RSS Codrops

    • SVG Filter Effects: Creating Texture with <feTurbulence>

    RSS Melodycode

    • Chi è Daniele Simonin?

    RSS YIT

    • Chi ha ancora bisogno dei grafici?

    Dal 2001 lavoriamo sul web, seguendone sviluppi e tecnologie. Ecco perché, oggi, siamo il partner scelto da oltre 400 clienti. Manchi solo tu: contattaci subito!

    Privacy Policy

    Cookie Policy

    Articoli recenti

    • Come scegliere un dominio per il tuo sito web? 28 Gennaio 2019
    • Jetpack, creare un newsticker dei post più visti 18 Gennaio 2019
    • Contact Form 7: inviare mail all’autore del post 9 Novembre 2018

    Servizi

    • #rifattilseo
    • #rifattilweb
    • #rifattilsocial
    • #rifattilhosting

    Contatti

    Effetti Speciali srl
    Via Padana Superiore 68
    20060 Bellinzago Lombardo - MI

    Tel: 0295382727
    mail: web@effettispeciali.com

    P.IVA/C.F: 09707140969
    REA: MI 2109451
    Cap. Soc. 10.000 € i.v.

    • Home
    • Servizi
    • Siti web a Milano
    • Blog
    • Privacy
    • Contatti
    • Home
    • About
    • Servizi
      • #rifattilseo
      • #rifattilweb
      • #rifattilsocial
      • #rifattilhosting
      • Siti web a Milano
    • Portfolio
    • Blog
    • Contatti
    Effetti Speciali Web Agency