使用 jQuery 根据子元素内容对 div 进行排序

Question

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

这是一个 div 块的我的 html 代码的样子（在一页中，我需要按价格或字母顺序重新排序/排序。

<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。该插件的示例有效，但我无法使其适用于我的网站。

这是当用户从下拉列表中选择排序选项（价格、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')。