JQuery waiting for code completion

Question

I wrote javascript using jQuery to replace any favorite lists with an alternative to div and ul so that it would give me some more style controls and make the dropdowns look like a cross browser. Below code works 99% for me, but I have one problem. At the bottom of the code, I had to use .delay () to tell the code to wait for the .each () loop above to complete its action. The problem is that at least one second remains until a replacement occurs, with the exception of the flash of the old select blocks. I can also foresee one more problem: if each () needs more than one second to complete the loop ...

How can I get the code below so that it only starts after each cycle is started and completed. I also welcome any optimizations for the rest of the code.

EDIT: some of the HTML was removed from the code, so I added it: 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

Scott

Answer 1

Inside your function, compare the jquery index with you, with the total number of elements you have.

I do not know your html, but I believe that you can do it.

Modify your function so that it receives the index parameter that the jquery sends.

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

Then, at the end of this function, compare the length with the index, if they match, then you are done

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

, . , "" .

,

Answer 2

, l. (), , , :

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

  <...code...>

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