ottimizzare 400 script per 400 div

[markzzz]

salve. ho la necessita di lavorare su dei determinati div (in particolare, 400 div).

per ogni div (vengono generati tramite php dentro a un ciclo while) assegno i seguenti script (con jquery):

<script type="text/javascript">
    $(document).ready(function () {
        $('<?="#recentmenuwide".$i?>').mouseover(function () {
            overWide('<?=$i?>');
        });
        
        $('<?="#recentmenuwide".$i?>').mouseout(function () {
            outWide('<?=$i?>');
        });

        <?
            // servono solo a modificare la grafica delle label NEW, ma se non sono registrato non mi servono
            if(isset($_SESSION['nickname'])) {
            ?>
                $('<?="#recentmenutracklist".$i?>').mouseup(function () {
                    tracklistVisited('<?=$i?>', '1');
                });							

                $('<?="#recentmenuhistory".$i?>').mouseup(function () {
                    historyVisited('<?=$i?>', '0');
                });	

                $('<?="#recentmenuinfos".$i?>').mouseup(function () {
                    infoVisited('<?=$i?>', '0');
                });		
            <?
            }
        ?>											
    });
</script>

NB. ogni div ha un id diverso, in quanto la variabile $i parte da 0 e viene incrementata ogni volta.

il div "recentmenuwide".$i viene controllato dagli eventi mouseout e mouseover. all'interno di questo div ci sono rispettivamente altri 3 div che vengono controllati dall'evento mouseup (che si verifica quando clicco sopra questi div).

capirete che il carico è gigantesco (chrome e firefox ancora ancora resistono, internet explorer alle volte si pianta).

vorrei alleggerire il tutto. avevo pensato a questo (anche se preferire alleggerire con js) :
invece che mettere i 400 div in una pagina, dividere 20 div per 20 pagine con una barra di navigazione pagine (per alleggerire il lavoro).

attendo qualche consiglio, sicuramente qualcuno ne ha!

cordiali saluti

[Xinod]

paginare in un caso del genere puo' essere opportuno

comunque, per evitare di settare un' infinita' di gestori evento personalmente proverei a settarli solo su di un contenitore comune e determinare chi in realta' scatena l' evento

un processo del genere, che si fa in comune javascript, e' stato recentemente introdotto in maniera nativa da jquery
http://api.jquery.com/delegate/
prova

[markzzz]

EDIT :
allora ho provato così :

<script type="text/javascript">
	$(document).ready(function() {
		$(".stdbodyyestopnobottom").delegate("#idwide", "mouseover", function(){
			$("#idwide").removeClass('recentwideout');
			$("#idwide").addClass('recentwideon');
		});
		
		$(".stdbodyyestopnobottom").delegate("#idwide", "mouseout", function(){
			$("#idwide").removeClass('recentwideon');
			$("#idwide").addClass('recentwideout');	
		});		
	});
</script>

<div class="stdbodyyestopnobottom">
<?
    $i=0;
    while ($i<400) {
    ?>
        <div id="idwide" class="recentwideout">
            Questo e' il mio div numero <?=$i?>
        </div>	
    <?
    $i++;
    }
?>
</div

funziona, però funziona solo per il primo div (come pensavo). io avrei la necessità di distinguerli in modo che agiscano su un determinato div, non solo sul primo

[Xinod]

e non li devi selezionare per id

		$(".stdbodyyestopnobottom").delegate("div", "mouseover", function(){
			$(this).removeClass('recentwideout');
			$(this).addClass('recentwideon');
		});

o comunque con un selettore piu' generico dell' id

[Xinod]

poi perche' assegni una classe al contenitore?
se e' unico, come immagino sia, individualo per id che e' sicuramente piu' veloce

[Xinod]

Originariamente inviato da markzzz

<?
    $i=0;
    while ($i<400) {
    ?>
        <div id="idwide" class="recentwideout">
            Questo e' il mio div numero <?=$i?>
        </div>	
    <?
    $i++;
    }
?>
</div

occhio che questo, se non e' una prova volante, e' sbagliatissimo: 400 div con lo stesso id!

[markzzz]

uhm, il fatto è che dentro al div .stdbodyyestopnobottom ho altri div. esempio :

<div class="stdbodyyestopnobottom">
<?
    $i=0;
    while ($i<400) {
    ?>
        <div id="idwide" class="recentwideout">
            QUESTO DIV NUMERO <?=$i?> DEVE CAMBIARE AL PASSAGGIO DEL MOUSE
        </div>

        <div class="divblabla">
            QUESTO DIV NON DEVE CAMBIARE AL PASSAGGIO DEL MOUSE
        </div>
    <?
    $i++;
    }
?>
</div

ora, implementando questa :

<script type="text/javascript">
	$(document).ready(function() {
		$(".stdbodyyestopnobottom").delegate("div", "mouseover", function(){
			$(this).removeClass('recentwideout');
			$(this).addClass('recentwideon');
		});
		
		$(".stdbodyyestopnobottom").delegate("div", "mouseout", function(){
			$(this).removeClass('recentwideon');
			$(this).addClass('recentwideout');	
		});		
	});
</script>

funziona (applica effettivamente le mie funzioni in mouseout/mouseover) ma le applica ad entrambi i div (ovviamente). SHIT

P.s. : sisi, mettere 400 div con stesso id è sbagliatissimo, era proprio perchè era una prova volante
per quanto riguarda l'id al posto della classe, ho delle pagine che ne contengono anche due, ecco perchè ho messo la classe.

[Xinod]

esistono una quantita enorme di selezioni possibili
http://api.jquery.com/category/selectors/
sono sicuro ne troverai uno adatto al tuo caso

[markzzz]

non credo di aver capito cosa tu intenda. sò solo che devo mettermi in ascolto su dei "div"...e come selettori più dei classici id e class non ne conosco... proverò a vedere comunque

[Xinod]

intanto a questo puoi dare una classe, perche' effettivamente e' speciale rispetto agli altri div

$(".stdbodyyestopnobottom").delegate(".nomeClasse" ...

o comunque, se e' sempre il primo figlio (diretto), "div:first"