从 $('.class').appendTo() 访问各自的父对象

Question

我正在尝试调整我found here 的一些幻灯片代码，使其可基于类重用。第一个幻灯片切换一次，但没有其他变化。我假设这是由于使用了$(this).parent()。如果是这样，我将如何正确访问相应的父级？如果不是，那是怎么回事？

编辑：为了清楚起见，两个盒子的内容应该独立改变！

$('.widget-slide:first').show();
setInterval(function() {
    $('.widget-slide:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo($(this).parent());
}, 2000);

.widget-slideshow {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
}

.widget-slide:not(:first-child){
  display: none;
}

.widget-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget-slideshow">
    <div class="widget-slide">
        1
    </div>
    <div class="widget-slide">
        2
    </div>
    <div class="widget-slide">
        3
    </div>
    <div class="widget-slide">
        4
    </div>
</div>

<div class="widget-slideshow">
    <div class="widget-slide">
        A
    </div>
    <div class="widget-slide">
        B
    </div>
    <div class="widget-slide">
        C
    </div>
    <div class="widget-slide">
        D
    </div>
</div>

Answer 1

虽然从技术上讲它不能回答我的问题，但这很好用。

$('.widget-slide:first').show();
  setInterval(function() {
  $('.widget-slideshow').each(function(i) {
    $(this).find('.widget-slide:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo($(this));
    })
}, 2000);

.widget-slideshow {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
}

.widget-slide:not(:first-child){
  display: none;
}

.widget-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget-slideshow">
    <div class="widget-slide">
        1
    </div>
    <div class="widget-slide">
        2
    </div>
    <div class="widget-slide">
        3
    </div>
    <div class="widget-slide">
        4
    </div>
</div>

<div class="widget-slideshow">
    <div class="widget-slide">
        A
    </div>
    <div class="widget-slide">
        B
    </div>
    <div class="widget-slide">
        C
    </div>
    <div class="widget-slide">
        D
    </div>
</div>

Answer 2

如果你想让你的代码可重用，你必须使用each() 函数，这样它会在你添加时作为匹配滑块循环并让它们进入/退出：

$(".widget-slideshow").find('.widget-slide:first').each(function() {
    $(this).fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo($(this).parent());
});

工作片段

$('.widget-slide:first').show();
setInterval(function() {
  $(".widget-slideshow").find('.widget-slide:first').each(function() {
    $(this).fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo($(this).parent());
  });
}, 3000);

.widget-slideshow {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
}

.widget-slide:not(:first-child) {
  display: none;
}

.widget-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget-slideshow">
  <div class="widget-slide">
    1
  </div>
  <div class="widget-slide">
    2
  </div>
  <div class="widget-slide">
    3
  </div>
  <div class="widget-slide">
    4
  </div>
</div>

<div class="widget-slideshow">
  <div class="widget-slide">
    1
  </div>
  <div class="widget-slide">
    2
  </div>
  <div class="widget-slide">
    3
  </div>
  <div class="widget-slide">
    4
  </div>
</div>