Question

我通过.clone（true）克隆了一些元素，之后我需要从每个元素中获取css（'left'），但我无法弄清楚我的错误是什么。我可以在克隆之前获得此属性，但在

之后不能这样做

这是我的代码：

HTML

  <button class="slider__btn slider__btn--left" type="button" name="button"
          @click="previousSlide">
  </button>

  <ul class="slider__slides" data-current="0">
    <li class="slider__slide slider__slide--slide1">
      <img class="slider__img" src="../../img/slide1.png" alt="1">
      <h3 class="slider__title">
        Левый слайд
      </h3>
      <span class="slider__date">21 февраля 2017</span>
    </li>

    <li class="slider__slide slider__slide--slide2">
      <img class="slider__img" src="../../img/slide1.png" alt="1">
      <h3 class="slider__title">
        Левый слайд
      </h3>
      <span class="slider__date">21 февраля 2017</span>
    </li>

    <li class="slider__slide slider__slide--slide3 slider__slide--left">
      <img class="slider__img" src="../../img/slide2.png" alt="1">
      <h3 class="slider__title">
        Левый слайд
      </h3>
      <span class="slider__date">25 февраля 2017</span>
    </li>

    <li class="slider__slide slider__slide--slide4 slider__slide--current">
      <img class="slider__img" src="../../img/slide3.png" alt="2">
      <h3 class="slider__title">
        Текущий слайд
      </h3>
      <span class="slider__date">27 февраля 2017</span>
    </li>

    <li class="slider__slide slider__slide--slide5 slider__slide--right">
      <img class="slider__img" src="../../img/slide4.png" alt="3">
      <h3 class="slider__title">
        Правый слайд
      </h3>
      <span class="slider__date">28 февраля 2017</span>
    </li>

    <li class="slider__slide slider__slide--slide6">
      <img class="slider__img" src="../../img/slide5.png" alt="4">
      <h3 class="slider__title">
        Скрытый слайд
      </h3>
      <span class="slider__date">29 февраля 2017</span>
    </li>

    <li class="slider__slide slider__slide--slide7">
      <img class="slider__img" src="../../img/slide5.png" alt="4">
      <h3 class="slider__title">
        Скрытый слайд
      </h3>
      <span class="slider__date">29 февраля 2017</span>
    </li>
  </ul>

  <button class="slider__btn slider__btn--right" type="button" name="button"
          @click="nextSlide">
  </button>
</div>

JS

  $('.slider__btn--left').click(function() {
   var slideWidth = 620
   var currentSlide = parseInt($('.slider__slides').data('current'))
   currentSlide++
   var size = $('.slider__slides').children().length

  // I can get .css('left') before I clone this elements

   $('.slider__slide').each(function () {
    var position = $(this).css('left')
    console.log(position)
   })
   var cloned = $('.slider__slide').clone(true)

   if (currentSlide === 1) {
    $(cloned).each(function () {
    // BUT CAN'T GET IT HERE
      var position = $(this).css('left')
      console.log(position)
      var newPosition = position - slideWidth
      console.log(newPosition)
      $(this).css('left', newPosition)
      console.log($(this).css('left'))
    })
    $(cloned).prependTo('.slider__slides')
   }
   console.log(currentSlide)
   console.log('size', size)
   $('.slider__slide').each(function () {
    var left = parseInt($(this).css('left'))
    var newPosition = left + slideWidth
    $(this).animate({left: newPosition}, 300).data('current', currentSlide)
    $('.slider__slides').data('current', currentSlide)
  })
  $('.slider__slide').data('current', currentSlide)
 }
}

如何通过jquery

0 个答案: