html - How can i get all the img child of current image inside a div?

Question

I have 5 images inside a div, none of this with id as they′re dynamically generated, so i need to make visible one and invisible the others, while the mouse moves around the image on visible. I have some of this working: t

    <div class="imgr"   class="imgdiv" style="border: orange;width: 50%; height: auto; border-style: solid;" >
        <img src="./img/9.png" alt="" class="roll" style="width: 100%;position: relative;height:100%; display: none" >
        <img src="./img/10.png" alt="" class="roll" style="width: 100%;position: relative; display: block" >
        <img src="./img/11.png" alt="" class="roll" style="width: 100%;position: relative; display: none" >
        <img src="./img/12.png"  alt="" class="roll" style="width: 100%;position: relative; display: none" >
        
   </div>

The jquery:

$(document).ready(function() {
            $('img').on("mousemove", function(e) 
            {
                var offset = $(this).offset();

                // console.log($(this)[0].parentElement);
                d=$(this)[0];
              

                console.log("pid:"+d.parentElement);

                var X = (e.pageX - offset.left);
                var Y = (e.pageY - offset.top);
               // console.log($(this)[0].id)
                // console.log(e);
            // ]$('#coord').text('X: ' + X + ', Y: ' + Y);
                l=$(this)[0].clientWidth;
                //console.log("l:"+l);
                l0=0;
                l1=l*0.2;
                l2=l*0.4;
                l3=l*0.6;
                l4=l*0.8;
                
        

                if(X>l0 && X<l1){
                  
                  if(CurrImg!=0)
                  {
              
                    CurrImg=0;
                    globalVariable++;
                    console.log(globalVariable);
                    console.log("Imagen0");
                 
                  }

                }

                if(X>l1 && X<l2){
                  
                  if(CurrImg!=1)
                  {
                    
                    CurrImg=1;
                    globalVariable++;
                    console.log(globalVariable);
                    console.log("Imagen1");
                  
                  }
                }
 
                if(X>l2 && X<l3){
               
                
                if(CurrImg!=2)
                  {
                    
CurrImg=2;
                    globalVariable++;
                    console.log(globalVariable);
                    console.log("Imagen2");
                
                  }
                
                }
                
                if(X>l3 && X<l4){
                if(CurrImg!=3)
                  {
                    
                    CurrImg=3;
                    globalVariable++;
                    console.log(globalVariable);
                    console.log("Imagen3");
                    
                    
                
                  }
                }
                if( X>l4){
                if(CurrImg!=4)
                  {
                    
                    CurrImg=4;
                    globalVariable++;
                    console.log(globalVariable);
                    console.log("Imagen4");
                    
                
                  }
                }
                
            });
        });

with the $(this)[0].parentElement i get the div and all the content, but i was unable to get the image that is visible and set it display:none and set the other one to visible. how can i achieve this ?

question from:https://stackoverflow.com/questions/65841652/how-can-i-get-all-the-img-child-of-current-image-inside-a-div

Answer 1

Waitting for answers