Scorrere elementi DOM e prendere dei valori

[Vittorio Cerruti]

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:

          <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:

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]

Ciao, prova in questo modo:

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]

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:

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.

 

[flameseeker]

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

Hai solo aggiunto valore alla discussione, non c'è niente di cui scusarsi

 

[Vittorio Cerruti]

Ragazzi, grazie mille entrambi.. entrambe le soluzioni sono perfette
@WmbertSea, terrò a mente i tuoi suggerimenti

Un saluto
Vittorio

 

[Vittorio Cerruti]

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?

 

[Vittorio Cerruti]

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?

Risolto..

 

[WmbertSea]

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:

if ($('.prenota.step1 .trattamenti .trattamento:checked').length==0){ // se nessun checkbox è spuntato
  alert("Selezionare almeno una voce.");
  return; // esco dalla funzione
}

 

[Vittorio Cerruti]

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:

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!