jQuery .appendTo（要素）はすべ​​てのIEバージョンで動作していませんか？

Question

私は私のページにdivをソートし、次のJavaScriptコードを持っている：

$(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の全バージョン）。 selectリストオプション（sort関数を呼び出す）を変更してスクリプトを実行すると、IEですべてが消えます。それはjQueryの.appentTo（要素）reorderEL機能でIEか何かで働いていないと問題になる可能性があり次のようになります。

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

}

は、誰もがこの1の回避策のための提案を持っていますか？

Answer 1

私に飛び出し事：

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

のように書き換えることができます

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

この方法：また

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

、あなたはおそらく、フェードアニメーションをやり直す必要がありますfadeOut（）はすぐに戻り、アニメーションtを待つことはありません。 o終了するので、コールバック関数を提供する必要があります。