jQuery .appendTo(element) not working in all IE versions?

Question

I have the following Javascript code that sorts divs on my page:

$(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>

This sorting function works well in all browsers but not at all in IE (all versions of IE). When I run the script by changing the select list option (calls the sort function), everything disappears in IE. Looks like it may be an issue with the jQuery .appentTo(element) not working in IE or something in the reorderEL function:

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

}

Does anyone have suggestions for a workaround on this one?

I gotta say, that `jQuery()` mark-up makes for a hard read. Would be much easier to read if you'd use `$()`. — Tomm, Jul 21 '11 at 23:58
@Tomm for someof us we have multiple frameworks and can't do that. Its not hard to read once you get used to it. — James Khoury, Jul 22 '11 at 00:37

Dennis · Accepted Answer · 2011-07-22T00:32:58.393

2

The thing that jumps out at me:

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

could be rewritten as:

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

Also, you should probably redo the fade animation:

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

This way, it fades out, then reorders the contents, then fades back in. fadeOut() will return immediately, it won't wait for the animation to finish, so a callback function has to be provided.

edited Jul 22 '11 at 00:32

answered Jul 22 '11 at 00:07

Dennis

32,200
11
64
79

Dennis, thanks a lot! That did the trick. It works in IE as well now. What a clean up for the reorderEl function! :) Same thing for fading, it makes more sense now visually. – IntricatePixels Jul 22 '11 at 01:14
I did a little more looking into DOM manipulation and you may not even need the empty() call. append() will detach an element from its current before adding it to the new parent. – Dennis Jul 22 '11 at 15:36

jQuery .appendTo(element) not working in all IE versions?

1 Answers1