come contare i tag img ogni volta su evento mouseover

Question

Devo contare div ogni volta su mouseover evento qui è example

$(document).ready(function() { 
 

 
    var thumb = $('.thm-img img'); 
 
    var outer = $('.mn-img'); 
 
    var full = $('.full-img'); 
 
    var count = $('.mn-img img').length; 
 
    var count = $('.mn-img img').length; 
 
    var sc_height = $(outer).height(); 
 

 
    $(thumb).mouseover(function() { 
 

 
    console.log(count); 
 
    $(full).hide(); 
 
    if (!$(this).hasClass('added')) { 
 
     $(this).addClass('added').clone().insertAfter($(full)); 
 
     // $(outer).animate({scrollTop : sc_height + "px"},200); 
 
    } 
 
    }); 
 
});

.det-sl-wrp { 
 
    display: block; 
 
    width: 100%; 
 
    height: 480px; 
 
    background: #FFFFFF; 
 
    border: 1px solid #fff; 
 
    margin: 8px 0 8px 0; 
 
} 
 
.mn-img { 
 
    position: relative; 
 
    width: 650px; 
 
    height: 100%; 
 
    background: red; 
 
    float: left; 
 
    overflow: scroll; 
 
} 
 
.thumb-wrp { 
 
    float: left; 
 
    width: 145px; 
 
    overflow-y: auto; 
 
    height: 100%; 
 
    margin: 0 0 0 8px; 
 
} 
 
.mn-img img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.sl-lft, 
 
.sl-rgh { 
 
    top: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0); 
 
} 
 
.sl-rgh { 
 
    left: 0; 
 
} 
 
.thm-img { 
 
    width: 100%; 
 
    display: block; 
 
    height: 100px; 
 
    margin: 2px 0 2px 0; 
 
} 
 
.thm-img img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="det-sl-wrp"> 
 
    <div class="mn-img"> 
 
    <div class="sl-lft"></div> 
 
    <img class="full-img" src="img/img/1.jpg"> 
 
    <div class="sl-rgh"></div> 
 
    </div> 
 
    <div class="thumb-wrp"> 
 
    <div class="thm-img"> 
 
     <img src="img/img/1.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/2.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/3.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/4.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/1.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/2.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/3.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/4.jpg"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Spostare il var count = $('.mn-img img').length; all'interno del mouseover callback.

Come le immagini vengono aggiunte dinamicamente nel DOM, il numero di immagini deve essere calcolato dinamicamente.

In caso contrario, il valore di count viene memorizzato nella cache e sarà lo stesso anche dopo l'aggiunta di più immagini in modo dinamico.

Demo

$(document).ready(function() { 
 

 
    var thumb = $('.thm-img img'); 
 
    var outer = $('.mn-img'); 
 
    var full = $('.full-img'); 
 
    var count = $('.mn-img img').length; 
 
    var sc_height = $(outer).height(); 
 

 
    $(thumb).mouseover(function() { 
 
    var count = $('.mn-img img').length; 
 
    console.log(count); 
 
    $(full).hide(); 
 
    if (!$(this).hasClass('added')) { 
 
     $(this).addClass('added').clone().insertAfter($(full)); 
 
     // $(outer).animate({scrollTop : sc_height + "px"},200); 
 
    } 
 
    }); 
 
});

.det-sl-wrp { 
 
    display: block; 
 
    width: 100%; 
 
    height: 480px; 
 
    background: #FFFFFF; 
 
    border: 1px solid #fff; 
 
    margin: 8px 0 8px 0; 
 
} 
 
.mn-img { 
 
    position: relative; 
 
    width: 650px; 
 
    height: 100%; 
 
    background: red; 
 
    float: left; 
 
    overflow: scroll; 
 
} 
 
.thumb-wrp { 
 
    float: left; 
 
    width: 145px; 
 
    overflow-y: auto; 
 
    height: 100%; 
 
    margin: 0 0 0 8px; 
 
} 
 
.mn-img img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.sl-lft, 
 
.sl-rgh { 
 
    top: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0); 
 
} 
 
.sl-rgh { 
 
    left: 0; 
 
} 
 
.thm-img { 
 
    width: 100%; 
 
    display: block; 
 
    height: 100px; 
 
    margin: 2px 0 2px 0; 
 
} 
 
.thm-img img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="det-sl-wrp"> 
 
    <div class="mn-img"> 
 
    <div class="sl-lft"></div> 
 
    <img class="full-img" src="img/img/1.jpg"> 
 
    <div class="sl-rgh"></div> 
 
    </div> 
 
    <div class="thumb-wrp"> 
 
    <div class="thm-img"> 
 
     <img src="img/img/1.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/2.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/3.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/4.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/1.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/2.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/3.jpg"> 
 
    </div> 
 
    <div class="thm-img"> 
 
     <img src="img/img/4.jpg"> 
 
    </div> 
 
    </div> 
 
</div>