[Jquery] Ripetere funzione con elementi diversi

cla83

[Jquery] Ripetere funzione con elementi diversi

Ciao a tutti,
Ho il seguente script che mi aggiunge una classe su un elemento <li> in base all'altezza di un div,
come posso fare per evitare di ripetere il codice?


$(window).live('change', resizeFrame);

function resizeFrame() { 
var divHeight = $('li#nomeA').outerHeight();
if(divHeight > 30) { $('li#nomeA > a').addClass('Selezionato');} else { $('li#nomeA > a').removeClass('Selezionato'); } } setInterval(resizeFrame, 150);

function resizeFrame2() { 
var divHeight = $('li#nomeB').outerHeight();
if(divHeight > 30) { $('li#nomeB > a').addClass('Selezionato');} else { $('li#nomeB > a').removeClass('Selezionato'); } } setInterval(resizeFrame2, 150);

grazie!

cla83

Ciao a tutti,
putroppo ancora non ho trovato una soluzione per rendere più pulito e semplice questo codice, qualcuno può aiutarmi?

grazie!

francesco.di.caprio


$(window).live('change', resizeFrame);
var frames = ["#nomeA", "#nomeB", "#nomeC", "#nomeD"];
$.each(frames, function() {
    var divHeight = $('li' + this).outerHeight();
    if(divHeight > 30) {
        $('li' + this + ' > a').addClass('Selezionato');
    } else {
        $('li' + this + ' > a').removeClass('Selezionato');
    }
});

metti tutti i nomi in un array e poi li scorri con un $.each(). L'attuale valore a cui sta puntando il ciclo nell'array è rappresentato da this. La funzione setInterval() l'ho rimossa... a che ti serve se hai messo in live() l'evento change?

cla83

@Francesco Di Caprio said:

metti tutti i nomi in un array e poi li scorri con un $.each(). L'attuale valore a cui sta puntando il ciclo nell'array è rappresentato da this. La funzione setInterval() l'ho rimossa... a che ti serve se hai messo in live() l'evento change?

Ciao Francesco,
grazie mille per l'aiuto.
A dire la verità ho modificato questo script trovato in rete h t t p : //jsbin.com/ewiko4/8/edit che calcola l'altezza di un div.
Ho provato lo script da te postato ma non funziona, vedo che c'è ancora il richiamo della funzione set interval resizeframe in questo punto: $(window).live('change', resizeFrame);
L'ho eliminata però in quel caso mi aggiunge le classi direttamente.

cla83

Questo è un esempio funzionante con il mio codice h t t p ://gd83.altervista.org/example/
giusto per dare un'idea di quello che voglio realizzare.

francesco.di.caprio

Ma tu hai chiesto come fare per evitare di ripetere due volte lo stesso codice, non come fare per aumentare l'altezza di un div se viene cliccato. Spiega bene cosa vuoi fare e poi vediamo come farlo. Per aumentare l'altezza di un div, l'oggetto window non ti serve.

cla83

@Francesco Di Caprio said:

Ma tu hai chiesto come fare per evitare di ripetere due volte lo stesso codice, non come fare per aumentare l'altezza di un div se viene cliccato. Spiega bene cosa vuoi fare e poi vediamo come farlo. Per aumentare l'altezza di un div, l'oggetto window non ti serve.

Ciao Francesco, si quello che volevo é proprio quello di riscrivere quella parte di codice senza ripeterla.
In teoria a me non serve aumentare l'altezza del div, ma di aggiungere la classe 'selected' all'attributo href quando l'elemento 'li' supera i 30px di altezza.
Il menù cliccabile che cambia l'altezza è fittizio, non c'entra con quello che devo realizzare è solo una simulazione per mostrare il funzionamento del codice da me postato.

cla83

Con questo esempio qui forse è più chiaro, in effetti mi sono spiegato proprio male

Però quello che vorrei migliorare è solo il codice da me postato inizialmente,
il resto non è da calcolare sia perché è solo una simulazione del codice reale e sia perché non ho la possibilità di modificare il sorgente orginale
il sorgente html e js, ma solo il mio blocco di codice.

Il tutto funziona correttamente, infatti quando la lista supera i 25px si aggiunge la classe 'Selected' all'attributo href.

ecco l'esempio :

h t t p : / / gd83.altervista.org/example2/

cla83

Sono riuscito a realizzare lo script con l'aiuto di Francesco (grazie!),
come potrei semplificare ancora il codice agendo direttamente sull'elemento li
senza specificare l'id?

grazie!

[HTML]

function resizeFrame() {
var frames = []; for (var i = 149, l = 1000; i < l; i++) {
frames.push(i);}
$.each(frames, function() {
var divHeight = $('li#' + this).outerHeight();

if (divHeight > 30) {

$('li#' + this + ' > a').addClass('Selected');
} else {
$('li#' + this + ' > a').removeClass('Selected');
}
});
}
setInterval(resizeFrame, 150);

<ul id="tree">
<li id ="150"> <a href="#">nameA</a>
<ul><li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li id ="250"> <a href="#">nameB</a>
<ul> <li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>

<li id ="980"> <a href="#">nameC</a>
<ul><li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>[/HTML]

francesco.di.caprio

Usando come selettore il tag, piuttosto che un id, agisci su tutti i tag. Con $("ul#tree li"), agisci su tutti i LI che sono figli dell'UL con ID "tree".

cla83

@Francesco Di Caprio said:

Usando come selettore il tag, piuttosto che un id, agisci su tutti i tag. Con $("ul#tree li"), agisci su tutti i LI che sono figli dell'UL con ID "tree".

Ho provato a modificare il codice in questo modo ma non funziona

[HTML]
$("#tree li").each(function() {
var divHeight = $('li').outerHeight();
if (divHeight > 30) {
$('li > a').addClass('Selected');
} else {
$('li > a').removeClass('Selected');
}
});
}
setInterval(resizeFrame, 150);[/HTML]

francesco.di.caprio

Cosa devi modificare, i li che sono sotto #tree, oppure i li che sono sotto l'ul che sta sotto?

cla83

@Francesco Di Caprio said:

Cosa devi modificare, i li che sono sotto #tree, oppure i li che sono sotto l'ul che sta sotto?

I tag li che sono sotto che stanno sotto l'ul tree, cioè quelli che nel codice html hanno l'id.

cla83

Ho modificato il codice in questo modo, ma applica la classe 'Selected' a tutti i tag a

[HTML]
function resizeFrame() {

$("ul#tree li").each(function() {       

 var divHeight = $('ul#tree li').outerHeight();

       if (divHeight > 30) { 

           $('ul#tree li > a').addClass('Selected');

        } else {

            $('ul#tree li > a').removeClass('Selected');

        }   

});

}
setInterval(resizeFrame, 50);[/HTML]