jQuery append eq() пробегает все элементы

Question

У меня есть ползунок из 6 изображений, которые я хочу беспрепятственно прокручивать по mousemove, как карусель. На mousemove я сдвигаю их влево, пока они не выходят из поля зрения. Когда первый выходит из поля зрения, я добавляю его до конца. Но когда первый добавляется в конец, я не могу заставить jQuery обновлять colors.eq (0) до нового первого изображения. Он продолжает думать colors.eq (0), который я уже добавил до конца. Как я могу сказать jQuery, чтобы обновить eq (0), чтобы быть новым первым элементом?

images.on('vmousemove', function(event) {  
    $(this).each(function() { 
     var marginLeft = parseInt($(this).css('margin-left'), 10); 
     $(this).css("margin-left", "-=" +(speed % window.innerWidth/6)); 
     if (marginLeft <= -30) { 
      allImages.append(images.eq(0)); 
     } 
     }) 
    }) 

Answer 1

Как насчет этого? Использовать DOMSubtreeModified событие для обновления цвета переменная. И не забывайте связывать mousemove событие снова по обновленным цветам.

var colors = $('.color'); 
 

 
$('.container').on('DOMSubtreeModified', function() { 
 
    colors = $('.color'); 
 
}); 
 

 
console.log('First element:' + colors.eq(0).attr('id')); 
 

 
$('.container').append(colors.eq(0)); 
 

 
console.log('First element:' + colors.eq(0).attr('id'));

.color { 
 
    background: green; 
 
    box-sizing: border-box; 
 
    color: white; 
 
    float:left; 
 
    margin-right: 5px; 
 
    padding: 15px; 
 
    text-align: center; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.color:nth-of-type(even) { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="color" id='1'>1</div> 
 
    <div class="color" id='2'>2</div> 
 
    <div class="color" id='3'>3</div> 
 
    <div class="color" id='4'>4</div> 
 
</div>