javascript - jQuery 循环遍历附加的 div

Question

尝试构建循环播放照片的良好效果，但仅当它们在开始时位于 HTML 代码中且不在之后附加时才有效。

代码如下:

    $(document).ready(function() {
        EmbedInit();
    });

function EmbedInit()
{
    // Init will be called when this page is loaded in the client.
    Start();

    var divs = $('div[id^="content-"]').hide(),
    i = 0;
    (function cycle() {
        divs.eq(i).fadeIn(800)
                  .delay(1000)
                  .fadeOut(800, cycle);
        i = ++i % divs.length;
    })();

    return;
}

在您询问之前，这是一个通过调用 EmbedInit 启动的软件的解决方法，因此这部分我无法触及。只需添加 $(document).ready(function()) 即可先在浏览器上进行测试。

现在我的 start() 函数是一个 ajax 请求，并向我的代码添加了大约 5 个 div，如下所示:

function Start() {
    var row1 = '<div id="content-1"><div id="photo"><img width="170" src="img.jpg"></div><div class="Text">Text</div></div>';
    var row2 = '<div id="content-2"><div id="photo"><img width="170" src="img.jpg"></div><div class="Text">Text</div></div>';
    var row3 = '<div id="content-3"><div id="photo"><img width="170" src="img.jpg"></div><div class="Text">Text</div></div>';
    $('#main').append(row1);
    $('#main').append(row2);
    $('#main').append(row3);
};

Div Main 在那里，我可以看到页面上的内容，但通过 div 的循环不正常。我猜这与动态添加 div 有关，因为变量 divs 的长度始终为 0。

处理这个问题的最佳方法应该是什么？

Answer 1

该函数是Start，使用大写S，而不是小写s。

function EmbedInit()
{
    // Here is the trouble maker
    Start();

    var divs = $('div[id^="content-"]').hide(),
    i = 0;
    function cycle() {
        divs.eq(i).fadeIn(800)
                  .delay(1000)
                  .fadeOut(800, cycle);
        i = (i + 1) % divs.length; // this is safer than ++i
    }
    cycle(); // call cycle normally (no need for Immediately Invoked Function Call)

    // return here has no meaning
}

工作片段:

$(document).ready(function() {
  EmbedInit();
});

function Start() {
  var row1 = '<div id="content-1"><div id="photo"><img width="170" src="http://placehold.it/200x200"></div><div class="Text">Text</div></div>';
  var row2 = '<div id="content-2"><div id="photo"><img width="170" src="http://placehold.it/201x201"></div><div class="Text">Text</div></div>';
  var row3 = '<div id="content-3"><div id="photo"><img width="170" src="http://placehold.it/202x202"></div><div class="Text">Text</div></div>';
  $('#main').append(row1);
  $('#main').append(row2);
  $('#main').append(row3);
}

function EmbedInit() {
  // Here is the trouble maker
  Start();

  var divs = $('div[id^="content-"]').hide(),
    i = 0;

  function cycle() {
    divs.eq(i).fadeIn(800)
      .delay(1000)
      .fadeOut(800, cycle);
    i = (i + 1) % divs.length; // this is safer than ++i
  }
  cycle(); // call cycle normally (no need for Immediately Invoked Function Call)

  // return here has no meaning
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'></div>