Question

我有一个6个图像的滑块，我想在像移动设备一样的鼠标上无缝地循环。在鼠标移动时，我将它们向左滑动，直到它们离开视野。当第一个消失时，我将它追加到最后。但是当第一个追加到最后时，我无法通过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 事件更新 colors 变量。不要忘记在更新的颜色上再次绑定 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>

jQuery append eq（）遍历所有元素

1 个答案: