Scorrere elementi DOM e prendere dei valori

Vittorio Cerruti

Nuovo Utente
7 Apr 2015
5
0
0
Ciao a tutti e grazie in anticipo per chi mi risponderà,
non uso da molto tempo jquery e mi sto imbattendo in un problema che non riesco a risolvere.

Ho una pagina web fatta in questo modo:

HTML:
          <div class="prenota step1">
                        <div class="trattamenti">
                            <input type="checkbox" name="trattamenti[]" class="trattamento">
                            <span class="text">
                                Peeling corpo total body al sale di Himalaya
                            </span>
                        </div>
                        <div class="trattamenti">
                            <input type="checkbox" name="trattamenti[]" class="trattamento">
                            <span class="text">
                                Trattamento fango total body / anticellulite
                            </span>
                        </div>
                        <div class="trattamenti">
                            <input type="checkbox" name="trattamenti[]" class="trattamento">
                            <span class="text">
                                Trattamento anticellulite riducente body cell
                            </span>
                        </div>
                        <div class="trattamenti">
                            <input type="checkbox" name="trattamenti[]" class="trattamento">
                            <span class="text">Trattamento defaticante gambe</span>
                        </div>
                   </div>

e del codice jquery così fatto:

HTML:
var continua = $('#continua'),
        $elencoTrattamenti = $('.prenota.step1 .trattamenti'),
        $elencoTrattamentiChecked = [],
        checked;

    continua.click(function(){
        $.each($elencoTrattamenti,function(pos,val){
            val = val[pos].find('.text').text();
            checked = pos.find('.trattamento').is(':checked');
            $elencoTrattamentiChecked.push(
                {
                    text: val,
                    checked: checked
                }
            );
        });
        console.log('Elenco elementi cliccati');
        console.log($elencoTrattamentiChecked);
    });

non riesco a scorrere correttamente gli elementi e a prendere per ogni div trattamenti, il testo nella classe text e il valore della checkbox.

Sicuramente sbaglio qualcosa.. ma cosa? Qualcuno ha qualche idea?

Grazie
 

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
Ciao, prova in questo modo:

HTML:
var elencoTrattamentiChecked = []
    
$('#continua').click(function() {
    var trattamenti = $('.trattamenti input[type="checkbox"]');
        
    $.each(trattamenti, function(k,v) {
        // aggiungo il valore index, che può essere utile a fare ulteriori controlli, a tua discrezione
        elencoTrattamentiChecked.push({
            index: k,
            value: $(v).parent().find('.text').text().trim(),
            checked: $(v).is(':checked')
        });
    });
        
    // giusto un print per esaminare l'informazione
    console.log(elencoTrattamentiChecked);
 
});
 

WmbertSea

Utente Attivo
28 Nov 2014
208
33
28
Ciao, prego in posticipo.

Premetto: dal momento che devi iterare un oggetto jQuery, sarebbe più opportuno utilizzare il metodo $(selector).each() anziché la funzione $.each().

Ad ogni modo può funzionare anche con tale funzione se non fosse per il fatto che stai facendo un po' di confusione con le variabili, argomenti della funzione.

In questo caso val identifica ogni singolo elemento che appartiene alla collezione dell'oggetto $elencoTrattamenti. Questo significa che non ha alcun senso scrivere val[pos] (come se val fosse $elencoTrattamenti) ma dovrai semplicemente scrivere val.
Poi nella riga sotto hai utilizzato pos.find, presumo sia dovuto essere val.find.

In qualunque caso, come detto in premessa, sarebbe più consona una soluzione del genere:
HTML:
var continua = $('#continua'),
$elencoTrattamenti = $('.prenota.step1 .trattamenti'),
$elencoTrattamentiChecked = [],
checked;

continua.click(function(){

    $elencoTrattamentiChecked = []; // <- meglio riazzerare l'array qui
    
    $elencoTrattamenti.each(function(){
        // tieni presente che puoi usare "this" per riferirti al singolo elemento iterato 
        
        val = $('.text', this).text();
        checked = $('.trattamento', this).is(":checked");
        $elencoTrattamentiChecked.push({text:val, checked:checked});
        
    });
    console.log('Elenco elementi cliccati');
    console.log($elencoTrattamentiChecked);
});

EDIT: @flameseeker, non ho visto il tuo post, scusami.
 
Ultima modifica:

Vittorio Cerruti

Nuovo Utente
7 Apr 2015
5
0
0
Ragazzi, grazie mille entrambi.. entrambe le soluzioni sono perfette :)
@WmbertSea, terrò a mente i tuoi suggerimenti :)

Un saluto
Vittorio
 

Vittorio Cerruti

Nuovo Utente
7 Apr 2015
5
0
0
Ragazzi scusatemi, se volessi apportare una modifica al codice js:
prima di fare il ciclio, voglio controllare che almeno una checkbox sia selezionata..
se selezionata, fa i ciclo, altrimenti messaggio di errore.. come potrei fare?
 

WmbertSea

Utente Attivo
28 Nov 2014
208
33
28
Ciao, sarebbe utile al forum se tu mostrassi come hai risolto.
Ad ogni modo indico una possibile soluzione.
All'inizio della funzione definita per il click (del pulsante continua) si può inserire uno script del genere:
Codice:
if ($('.prenota.step1 .trattamenti .trattamento:checked').length==0){ // se nessun checkbox è spuntato
  alert("Selezionare almeno una voce.");
  return; // esco dalla funzione
}
 

Vittorio Cerruti

Nuovo Utente
7 Apr 2015
5
0
0
Ciao, sarebbe utile al forum se tu mostrassi come hai risolto.
Ad ogni modo indico una possibile soluzione.
All'inizio della funzione definita per il click (del pulsante continua) si può inserire uno script del genere:
Codice:
if ($('.prenota.step1 .trattamenti .trattamento:checked').length==0){ // se nessun checkbox è spuntato
  alert("Selezionare almeno una voce.");
  return; // esco dalla funzione
}

scusami, hai perfettamente ragione.
Cmq sì, la tua soluzione è quella che ho realizzato

Grazie ancora per l'aiuto di prima!
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
GraceHawk ACCESS e VBA: scorrere le righe e le colonne di una tabella? MS Access 3
S Se voglio far scorrere le immagini dello sfondo di una pagina (oviamente html) come faccio? HTML e CSS 1
S Come faccio a far scorrere delle immagini come sfondo di una pagina? Discussioni Varie 1
K Far scorrere il menu dal fondo al top della pagina HTML e CSS 6
S far scorrere i banner, immagini Javascript 3
Monital Scorrere più file txt contententi un identico dato PHP 0
Monital Scorrere una dir codice particolare PHP 12
C Come faccio a far scorrere l'immagine con il resto? HTML e CSS 4
D Come si fa a far scorrere le notizie? (lettore di rss) PHP 2
I scorrere i record di un DB PHP 11
G Come far scorrere la linguetta titolo nel browser? HTML e CSS 3
M Come far scorrere i banner HTML e CSS 5
Silvia77 Scorrere record in una tabella Classic ASP 2
R Scorrere una SELECT con un campo testo Classic ASP 6
F Creare elementi html con javascript Javascript 4
R Includere elementi array fra apici PHP 1
A Contare gli elementi di un array PHP 13
T Contatore alla rovescia su più elementi simultaneamente Javascript 4
S [PHP] Estrarre elementi array su più variabili PHP 5
L [Java] Aggiungere elementi ad array JSON Java 0
R Visualizzazione elementi Access MS Access 2
D Elementi duplicati su blog SEO e Posizionamento 1
S elementi statistici - Matrice e Gestione Array PHP o Javascript Javascript 0
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
Raziel84 [Java] Combinazione elementi matrice Java 0
N Dialog performance con tanti elementi jQuery 2
alessandra86 [PHP] Elementi di un array non visualizzabili PHP 7
D [PHP] Elementi tabella in orizzontale e NON Verticale PHP 12
asevenx modificare lista elementi togliendo l'elemento selezionato jQuery 1
S [HTML] Comportamento di due elementi block level flottanti HTML e CSS 2
blips Racchiudere una serie di elementi in un div jQuery 2
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
F [Javascript] Problema funzione jquery con elementi css esterni Javascript 1
C [PHP] RISOLTO - Eliminare elementi duplicati da array multidimensionale PHP 1
F aggiungere codice dopo n elementi jquery jQuery 1
JeanWolf [Php] Elementi comuni di due array PHP 29
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
teoxs2508 [HTML] Posizionamento elementi su pagina web HTML e CSS 5
A come modificare gli elementi di una lista e gli editText? Sviluppo app per Android 0
JackIlPazzo Assegnare un id ad elementi con parser PHP 2
asevenx Selezionare elementi da un elenco in modo dinamico e inviarli al database PHP 0
N selezione elementi Javascript 0
asevenx Realizzare modulo per selezionare elementi da una lista PHP 1
C array_rand prende elementi casuali diversi? PHP 6
Marco_88 Verificare la selezione degli elementi dom jQuery 2
X Funzione onscroll relativa a elementi multipli Javascript 0
M elementi di una gridview appaiono in ordine casuale invece di quello deciso da me Sviluppo app per Android 2
N Dare id ad elementi classe jQuery 1
otto9due Accesso agli elementi <![CDATA[ ... ]]> di un file XML con SimpleXML e PHP PHP 2

Discussioni simili