jQuery append eq() durchlaufen alle Elemente

Question

Ich habe einen Schieberegler von 6 Bildern, die ich nahtlos auf Mouseover wie ein Karussell durchlaufen möchte. Auf Mausbewegungen verschiebe ich sie nach links, bis sie außer Sichtweite sind. Wenn der erste außer Sichtweite ist, füge ich ihn an das Ende an. Aber wenn der erste an das Ende angehängt wird, kann ich jQuery nicht dazu bringen, colors.eq (0) auf das neue erste Bild zu aktualisieren. Er behält die Farben bei. Das ist die, die ich bereits am Ende angehängt habe. Wie kann ich jQuery mitteilen, dass eq (0) das neue erste Element sein soll?

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

Wie wäre es damit? Verwenden Sie DOMsubtreeModified Ereignis zu aktualisieren Farben Variable. Und vergessen Sie nicht, das mousemove Ereignis erneut auf die aktualisierten Farben zu binden.

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>