Question

我正在尝试根据div中其他元素内的内容对页面中的n个div进行排序。

以下是我的html代码对于一个div块的看法（在一个页面中有几个这样的我需要按价格或按字母顺序重新排序/排序。

<div class="productBoxWrapper">
<li>
    <img src="my-product-image.jpg"></a>
    <div class="product-info">
        <h4>
            <!-- I need to sort all divs by the Product Name -->
            <a class="productTitleForSorting" href="product-page-link">Product Name</a><br>
        </h4>
        <div class="product-price">
            <span id="listPrice">Suggested Retail: $XX.XX</span>
            <span id="lowestPrice">As Low As:
                            <!-- I need to sort all divs by Product Price -->
            <span class="productPriceForSorting">$XX.XX</span></span>
        </div>
                   </div>               
    </li>
</div>

我正在使用此jQuery插件http://net.tutsplus.com/tutorials/javascript-ajax/sorting-values-with-javascript/，jquery.datasource。插件的示例有效，但我不能让它适用于我的网站。

以下是用户从下拉列表中选择排序选项（Price，Alpha）时触发的javascript。它有时会做一些随机排序，但不能正常工作。我担心我不会在这里调用正确的div或者其他东西......我是jQuery的新手，所以任何帮助都非常感激。请查看插件页面以供使用

change: function () {

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

if (selectedOptionValue == 'price-low-to-high')
{        
        // sort collection by price - low to high 
        jQuery('.productBoxWrapper').fadeTo("fast", 0.5);
        var $this = jQuery(this);

        jQuery('.productBoxWrapper').datasort({
            datatype: 'alpha',
            sortElement: '.productPriceForSorting',
            reverse: false
        });   
        jQuery('.productBoxWrapper').fadeTo("fast", 1);
}    

if (selectedOptionValue == 'price-high-to-low')
{
        // sort collection by price - high to low
        jQuery('.productBoxWrapper').fadeTo("fast", 0.5);
        var $this = jQuery(this);        
        jQuery('.productBoxWrapper').datasort({
            datatype: 'alpha',
            sortElement: jQuery('.productPriceForSorting'),
            reverse: true
        });      
        jQuery('.productBoxWrapper').fadeTo("fast", 1);  
}    

if (selectedOptionValue == 'alphabetically-a-to-z')
{
        // sort collection alphabetically a to z        
        jQuery('.productBoxWrapper').fadeTo("fast", 0.5);
        var $this = jQuery(this);        
        jQuery('#productTitleForSorting').datasort({
            datatype: 'alpha',
            sortElement: '.productTitleForSorting',
            reverse: false                
      });          
      jQuery('.productBoxWrapper').fadeTo("fast", 1);
}

if (selectedOptionValue == 'alphabetically-z-to-a')
{
        // sort collection alphabetically z to a
        jQuery('.productBoxWrapper').fadeTo("fast", 0.5);
        var $this = jQuery(this);        
        jQuery('.productBoxWrapper').datasort({
            datatype: 'alpha',
            sortElement: '.productTitleForSorting',
            reverse: false
        });
        jQuery('.productBoxWrapper').fadeTo("fast", 1);
   }
}

Answer 1

看起来不对的是jQuery（'。productBoxWrapper'）。你不应该对li进行排序，所以它应该是jQuery（'。productBoxWrapper li'）。

基于子元素内容使用jQuery对div进行排序

1 个答案: