从 $('.class').appendTo() 访问相应的 parent object

Question

我正在尝试根据类改编我 found here 的一些幻灯片代码以使其可重复使用。第一个幻灯片切换一次，但没有其他变化。我假设这是由于使用了 $(this).parent()。如果是这样，我将如何正确访问相应的 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

如果你想让你的代码可重用，你必须使用 each() 函数，这样它会在你添加并使它们成为匹配滑块时循环遍历 fiddle in/out :

$(".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>

Answer 2

虽然从技术上讲它没有回答我的问题，但效果很好。

$('.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>

从 $('.class').appendTo() 访问相应的 parent object

Access respective parent object from $('.class').appendTo()

javascript

jquery

slide

工作代码段