jQuery .appendTo (элемент) не работает во всех версиях IE? - PullRequest
Новая
       26

jQuery .appendTo (элемент) не работает во всех версиях IE?

1 голос
/ 22 июля 2011

У меня есть следующий код 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);        
});

}

У кого-нибудь есть предложения для обхода этой проблемы?

1 Ответ

2 голосов
/ 22 июля 2011

То, что выскакивает у меня: 

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 () немедленно вернется, он не будет ждать окончания анимации, поэтому должна быть обеспечена функция обратного вызова.

...