[Jquery] Visualizzazione random elementi li

felino

[Jquery] Visualizzazione random elementi li

Salve utenti,
ho un elenco del tipo:


<ul class="servizi">
    <li> Servizio 1</li>
    <li> Servizio 2</li>
    <li> Servizio 3</li>
    <li> Servizio 4</li>
    <li> Servizio 5</li>
</ul>

Avete qualche suggerimento al fine di avere una visualizzazione random di questi elementi li e limitata a 4 elementi per volta?

Grazie.

francesco.di.caprio

Puoi usare la funzione nth-child. Ti consente di identificare numericamente un tag.


var quantita = $(".servizi li").length;
var casuale = Math.floor(Math.random()*quantita) + 1;
$(".servizi li:nth-child(" + casuale + ")").show();

ovviamente, per default nel css li devi nascondere tutti preventivamente. Quindi

.servizi li { display: none }

felino

Grazie Francesco, questo è il secondo aiuto importante che mi dai!
Provo e ti do conferma.
Quindi io devo mettere il valore numero al posto della voce 'quantita'?

Grazie.

francesco.di.caprio

@felino said:

Quindi io devo mettere il valore numero al posto della voce 'quantita'?

No no, devi solo copia-incollare le istruzioni che ti ho dato nei fogli JS/CSS. La variabile quantità è assegnata per prima perché il numero casuale deve essere di un valore massimo pari al numero di LI presenti.

felino

Scusami, ma come indico gli elementi da visualizzare? Cioè, se ad esempio sono 3 o 4?

francesco.di.caprio

@felino said:

Scusami, ma come indico gli elementi da visualizzare? Cioè, se ad esempio sono 3 o 4?

Quanti "li" hai nella classe .servizi lo stabilisce la prima istruzione e memorizza in quantita. Il casuale da visualizzare è calcolato dalla seconda istruzione. "casuale" è un numero compreso tra 1 e quantita. Dopodiché la nth-child si occupa di mostrare il LI che corrispondente nell'ordine al numero casuale.

felino

Scusami Francesco, forse non mi sono spiegato, se nel mio ul ho 5 li ed io ne voglio visualizzare solo 3 per volta in maniera random, come dovrei fare?

Grazie.

francesco.di.caprio

@felino said:

Scusami Francesco, forse non mi sono spiegato, se nel mio ul ho 5 li ed io ne voglio visualizzare solo 3 per volta in maniera random, come dovrei fare?

Avevo capito che volevi estrarne uno casuale, non più di uno...


var num_davisualizzare = 3;
var davisualizzare = Array();
var visualizzati = 0;
var casuale = 0;
var quantita = $(".servizi li").length;
if (num_davisualizzare <= quantita) num_davisualizzare = quantita;
while (visualizzati <= num_davisualizzare) {
    casuale = Math.floor(Math.random()*quantita) + 1;
    if (!$.inArray(casuale, davisualizzare)) {
        davisualizzare.push(casuale);
        $(".servizi li:nth-child(" + casuale + ")").show();
        visualizzati++;
    }        
}

La variabile num_davisualizzare rappresenta il numero dei LI che vuoi visualizzare. Ovviamente se metti un valore superiore ai LI che hai, li visualizza tutti. La funzione push() serve per inserire un valore all'interno di un array. Ogni volta che genero un casuale verifico che non sia già nell'array, cioè che non sia stato già visualizzato.

felino

Francesco,
non so se sia una casualità oppure no, ma appena inserito il tuo codice Firefox mi da il seguente messaggio di errore:

"Uno script in questa pagina potrebbe essere occupato o aver smesso di rispondere. È possibile fermare lo script adesso o attendere per vedere se lo script conclude la sua esecuzione.

Script: ajax.googleapis . com /ajax/libs/jquery/1.8/jquery.min.js:2"

felino

Ho provato ad usare questo codice per la generazione di elementi casuali compresi da 1 e 5:


jQuery.extend({
        rand: function(val) {
            return Math.floor(val * (Math.random() % 1));
        },
        randComp: function(min, max) {
          min = Math.floor(min);
          max = Math.floor(max);
		  var boo = jQuery.rand(max-min);
          return min + boo;
        }
});

funziona correttamente, ma come faccio ad evitare che vengano visualizzati gli elementi doppioni?

Cioè se viene generato il numero 1, quando richiamo nuovamente la funziona il numero 1 non deve essere più generato.

francesco.di.caprio

Avevo sbagliato delle istruzioni. Ora funziona.


$(document).ready(function() {
    var num_davisualizzare = 3;
    var davisualizzare = Array();
    var visualizzati = 0;
    var casuale = 0;
    var quantita = $(".servizi li").length;
    if (num_davisualizzare > quantita) num_davisualizzare = quantita;
    while (visualizzati <= num_davisualizzare) {
        casuale = Math.floor(Math.random() * quantita) + 1;
        if (($.inArray(casuale, davisualizzare)) == -1) {
            davisualizzare.push(casuale);
            $(".servizi li:nth-child(" + casuale + ")").show();
            visualizzati = visualizzati+1;
        }
    }
});

felino

Grazie, funziona correttamente.
Nel tempo ho creato anche una soluzione in PHP:


$numbers = range(1, 5);
shuffle($numbers);
echo '<script>';
	for ($i=1 ; $i <= 4 ; $i++){ ?>
	$('.box_room_<?php echo $numbers*; ?>').show();
<?php } 
echo '</script>';

Genero 5 numeri casuali e li mettto in un array
inverto l'ordine in maniera casuale con shuffle
ne estraggo solo 4 su 5;
con jquery mostro il relativo id.

Che ne dite?