Question

我用jQuery编写了一些javascript，用div和ul替换任何选择列表，这样它就会给我一些样式控制，让下拉看起来像浏览器一样。以下代码对我有99％的作用，但我有一个问题。在代码的底部，我不得不使用.delay（）来告诉代码，等待上面的.each（）循环完成它的操作。这个问题是至少有一秒钟，直到更换发生，留下旧选择框的闪光。此外，我可以预见另一个问题是如果每个（）循环完成需要超过一秒的时间......

如何在每个循环运行并完成后才能让底部的代码运行。另外，我欢迎对其余代码进行任何优化。

编辑：某些HTML已从代码中删除，因此我将其粘贴到其中：http://pastebin.com/4HFLjHE1


// Check when ready
$(function() {

    // Find dropdowns
    $("select.dropdownreplace").each(function() {replaceDropDown(this);});
    // If document clicked anywhere hide drop downs
    $(document).click(function(event){
        $("div.dropdownreplace ul").hide();
    });

});

function replaceDropDown(that) {
    // Create HTML for new drop down
    // hidden field
    var hiddeninput = $('');
    // div
    var dropdowndiv = $(''+$(":selected", that).text()+'');

    // loop through values and make li's
    $("option", that).each(function() {
        $("ul", dropdowndiv).append(''+$(this).val()+''+$(this).text()+'');
        // set click handler for this drop down
        $(dropdowndiv).click(function() {
            $("ul", this).show();
            return false;
        });
        // set click handler for link items
        $("a", dropdowndiv).click(function() {
            // Get name of hidden input
            var nameofdropdown = $(this).parent().parent().parent().attr('id');
            var nameofinput = nameofdropdown.replace("dropdownreplacement_", "");
            // set hidden input value to whats been clicked
            $("[name='"+nameofinput+"']").val($(this).parent().find("span").text());
            // set div
            $("div#"+nameofdropdown+" > span").text($(this).text());
            $("div#"+nameofdropdown+" ul").hide();
            return false;
        });
    });

    // Remove drop down then add in replacement html
    $(that).delay(1000).after(hiddeninput);
    $(that).delay(1100).after(dropdowndiv);
    $(that).delay(1200).remove();   
}

Thnaks

斯科特

Answer 1

在你的函数中，比较jquery传递给你的索引，以及你拥有的项目总数。

我不知道你的HTML，但我相信你可以做到这一点。

更改您的函数，使其收到jquery发送的索引参数。

$("option", that).each(function(index) {

然后，在该函数结束时将长度与索引进行比较，如果它们相同，那么就完成了

if ( $('option', that).length == (index +1 ) ) {
    $(that).after(hiddeninput);
    $(that).after(dropdowndiv);
    $(that).remove();
}

从我的测试中，这应该是你需要的。不知道是否有更“标准”的方法来做到这一点。

希望这有帮助

Answer 2

你要做的是创建一个callback function l。在你的each（）中，在初始函数之后，你可以指出它在完成时还需要做更多的事情：

$("option", that).each(function() {

  <...code...>

}, function() {   
      <...code...>  //this gets performed after the previous function is complete
});

jQuery等待上面的代码执行完成

2 个答案: