Aplicar efecto a cada elemento asignado en javascript?

[minombreesmm]

la intencion es mostrar el mas info al pasar el mouse sobre el info
y si funciona siempre y cuando se trate de un solo elemento con ese nombre..

Código Javascript:

var masinfo="#masinfo";
var info="#info";
                
    $(masinfo).hover(function(){
                
 
 
                $(info).fadeIn(1000);
 
                }, function(){
 
                    $(info).fadeOut();
 
                });
 

veran con html y con php lo intente a hacer dinamico.
cree 2 divs, uno llamado info y otro masinfo.
los divs son dinamicos por los que en un for creo n veces esos divs.
osea: uno se llamara, info0 y masinfo0,info1 y masinfo1,info2 y masinfo2 etc. hasta n.

luego en el javascript intente aplicarlo asi

Código Javascript:

var masinfo="#masinfo";
var info="#info";
    for(var i=0; i<=n;i++){         
    $(masinfo+i).hover(function(){
                
 
 
                $(info+i).fadeIn(1000);
 
                }, function(){
 
                    $(info+i).fadeOut();
 
                });
 
}
 

la intención aquí es que el efecto agarre hasta n elementos. lo estoy haciendo mal?
como se podría hacer allí?
gracias de antemano.

[David]

Muestra cómo tienes el marcado HTML, será más fácil ver cuál es la mejor forma de hacerlo.

[minombreesmm]

Iniciado por David

Muestra cómo tienes el marcado HTML, será más fácil ver cuál es la mejor forma de hacerlo.

tengo una matriz, imaginate un mural de fotos...
asi
donde $ii=35

Código HTML:

<div id="content">
        <?  
 
          for($c=0;$c<=$ii;$c++)
          {
            
            
                ?>
                    <? if($cont<$ii){?>
                <div id="cuadros">
        
                <a  href="<? echo $f[$cont][2];?>" title="<? echo $f[$cont][2];?>"><img id="imgcompleta"src="<? echo $f[$cont][0];?>" /></a>
                <? 
                    $cont+=1;
        
                ?>
                
                </div>
            <? } 
            
            }?>
                 
             
        </div>
 

[David]

Pero allí no se ven los elementos que mencionas al principio, #info y #masinfo

[Trublux]

Aparte de que, como dice David, en el código que muestras no se encuentran los elemento que quieres usar en el JS, estás creando elementos con el mismo "id" (cuadros) que debe ser único.

[minombreesmm]

Iniciado por Trublux

Aparte de que, como dice David, en el código que muestras no se encuentran los elemento que quieres usar en el JS, estás creando elementos con el mismo "id" (cuadros) que debe ser único.

Bueno la verdad opte por otra opcion

y me equivoque de codigo..
lo hacia asi

Código PHP:

<div id="menuizquierdo">
    <? for($i=0; $i<=n;$i++){?>
        <div id="panel">
        
        <? if($cont<$ii){?> 
        <div id="masinfo<? echo $cont;?>" ><a href="#"><img  id="imgcompleta" src="<? echo $f[$cont][4];?>" alt="M&aacute;s informaci&oacute;n" /></a><br /><br />
        <a href="<? echo $[$cont][2];?>"><? echo $[$cont][2];?></a>
        </div>
        <div id="info<? echo $cont;?>">
        <a href="#"><img id="imgvistaprevia" src="http://localhost/p2/<? echo $[$cont][1];?>" alt="M&aacute;s informaci&oacute;n" /></a>    
        
        </div>
            <? $cont+=1;
                 }
     ?>
        </div>
        <? } ?>
    
    </div>
 

bueno la idea es que ya que este hecho es que se acomoden muchas imágenes en un div, que estén todas revueltas pero que se ajusten al tamaño del div contenedor
osea que tenga unas 100 imágenes y que si caben 10 en la primera fila que solo esas quepan y las que siguen se vayan a la siguiente fila.
osea que pueda tener filas de 11 y de 12 etc, y que ademas también pueda tener columnas de 11,12,13 etc.

es para que el usuario suba sus fotos lo de arriba lo ocupo para que con solo pasar el mouse la foto se haga grande.

[marlanga]

ID= UN SOLO ELEMENTO

CLASE = MUCHOS ELEMENTOS

Usa clases, por el amor de dios.

Código Javascript:

$(".miclase").hover(function(){
                $(this).find(".info").fadeIn(1000);
 
                }, function(){
 
                     $(this).find(".info").fadeOut();
 
                });