jQuery-只在另一个函数运行完毕后才运行一个函数

Question

我有一个长列表，我想使用jQuery Cycle对其进行"分页"。列表中大约有40个项目，我想一次显示5个，并在底部显示下一个/上一个。

这就是我要做的：http://jsfiddle.net/saltcod/vmdaM/97/

第一个函数将列表划分为5个项目的块，然后对结果运行jQueryCycle。

我把清单分为5项，还可以。但是jQueryCycle一直告诉我，它没有任何div可供使用。

在jQuery Cycle启动之前，我如何确保第一个函数完全完成了对列表的切片？

感谢

Terry

Answer 1

事实上，正如@minitech提到的那样，for循环保证在您初始化循环插件时完成。

问题出在你的选择器上：

$('#projectList').cycle(...)

projectList元素中没有任何div，只有一个ul。

像这样更改选择器：

$('#projectList ul').cycle(...)

当然。。。您的wrapAll调用使标记不正确。你现在有了ul > div > li，这几乎肯定是无效的。。。但是，嘿，无论如何，它都应该起作用，至少让你更进一步：）

Answer 2

问题是您的<div>仍然嵌套在<ul>中。你需要把它们从那里移走。我不知道出了什么问题，我无法让它正常工作。您是否缺少样式表？无论如何，这是我的重写，它使用了正确的标记：

var count = 1;
var newList;
var projectList = $('#projectList');
projectList.find('ul').remove().find('li').each(function(i) {
    if(i % 5 === 0) {
        newList = $('<ul>');
        newList.appendTo($('<div>').addClass('panel panel' + count++).appendTo(projectList));
    }
    newList.append(this);
});
projectList.cycle({
    fx: 'scrollVert',
    speed: 'fast',
    timeout: 0,
    prev: '.back',
    next: '.more'
});

这是一个演示。