jQuery .appendTo（element）不能在所有IE版本中工作？

Question

我有以下的JavaScript代碼在我的網頁排序的div：

$(function() { 

    var productContainer = $('.productBoxWrapper'); 

    function sortByPriceAsc (a,b){ 
     return Number(jQuery(a).find('.productPriceForSorting').text() - $(b).find('.productPriceForSorting').text()); 
    } 

    function sortByPriceDesc (a,b){ 
     return Number($(b).find('.productPriceForSorting').text() - $(a).find('.productPriceForSorting').text()); 
    } 

    function sortByTitleAsc (a,b){  
     return $(a).find('.productTitleForSorting').text() > $(b).find('.productTitleForSorting').text() ? 1 : -1;  
    } 

    function sortByTitleDesc (a,b){ 
     return $(b).find('.productTitleForSorting').text() > $(a).find('.productTitleForSorting').text() ? 1 : -1; 
    } 

    function reorderEl(el){ 
     var allProductsContainer = $('#product-collection'); 
     allProductsContainer.html(''); 
     el.each(function(){   
      $(this).appendTo(allProductsContainer);   
     }); 
    } 
    function fadeContainer() { 
     productContainer.fadeOut('fast'); 
     productContainer.fadeIn('fast'); 
    }  

    $('.dk').dropkick({ 

      change: function() { 

      var selectedOptionValue = $('#sortThisCollectionBaby option:selected').val(); 

      if (selectedOptionValue == 'price-low-to-high') 
      { 
       reorderEl(productContainer.sort(sortByPriceAsc)); 
       fadeContainer(); 
      } 
      else if (selectedOptionValue == 'price-high-to-low') 
      { 
       reorderEl(productContainer.sort(sortByPriceDesc)); 
       fadeContainer(); 
      } 
      else if (selectedOptionValue == 'alphabetically-a-to-z') 
      { 
       reorderEl(productContainer.sort(sortByTitleAsc)); 
       fadeContainer(); 
      } 
      else if (selectedOptionValue == 'alphabetically-z-to-a') 
      { 
       reorderEl(productContainer.sort(sortByTitleDesc)); 
       fadeContainer(); 
      } 
      else if (selectedOptionValue == 'best-selling') 
      { 
       window.location.reload(true); 
       fadeContainer(); 
      } 
      } // function  

    }); // dropkick 

    }); 

HTML：

<ul id="product-collection"> 

    <div class="productBoxWrapper">   
     <li> 
    <div class="product-info"> 
     <h4> 
      <a class="productTitleForSorting" href="my-product">MY PRODUCT</a><br> 
     </h4> 
     <div class="product-price"> 
     <span id="listPrice">Retail: $26.99</span>              
      <span style="display:none;" class="productPriceForSorting">895</span> 
      <span>Our Price: $8.95</span> 
     </div>     
    </div>    
    </li> 
    div class="productBoxBottom">   

    <!-- view product button --> 
    <a href="my-product">View</a>      
    </div> 
    </div> 

    <!-- I HAVE MORE DIVS FOR OTHER PRODUCTS HERE, SAME HTML AS ABOVE --> 

    </ul> 

此排序功能的工作原理以及在所有的瀏覽器，但不是在所有的IE瀏覽器（IE所有版本）。當我通過更改選擇列表選項（調用排序功能）來運行腳本時，所有內容都會在IE中消失。看起來它可能與jQuery的.appentTo（元素）在IE或東西不工作的reorderEL功能的問題：

function reorderEl(el){ 
var allProductsContainer = $('#product-collection'); 
allProductsContainer.html(''); 
el.each(function(){   
    $(this).appendTo(allProductsContainer);   
}); 

}

沒有人有在這一個解決辦法的建議？

Answer 1

，在跳出我的事情：

function reorderEl(el){ 
    var allProductsContainer = $('#product-collection'); 
    allProductsContainer.html(''); 
    el.each(function(){   
     $(this).appendTo(allProductsContainer);   
    }); 
} 

可以改寫爲：

function reorderEl(el){ 
    $("#product-collection").empty().append(el); 
} 

此外，你應該重做的動畫漸變：

productContainer.fadeOut("fast", function() { 
            reorderEl(productContainer.sort(sortByPriceAsc)); 
            productContainer.fadeIn(); 
           }); 

這樣，它淡出，然後重新排序內容，然後淡入。fadeOut（）將立即返回，它不會等待動畫t o完成，因此必須提供回調函數。