javascript - 页面加载后对内容进行排序

Question

我有这个页面：

<div class="products">
    <div id="product-1" class="product">
        <a href="#" title="View this" class="product-a">
            <img class="product-img" src="/product.png" alt="Image of this product" /><span class="stilt"></span>
            <div class="product-info">
               <h3 class="product-title"><span>This Product</span></h3>
               <p class="product-price"><span>Product price</span></p>
            </div>
        </a>
    </div>

    <div id="product-2" class="product">
        <a href="#" title="View this" class="product-a">
            <img class="product-img" src="/product.png" alt="Image of this product" /><span class="stilt"></span>
            <div class="product-info">
               <h3 class="product-title"><span>This Product</span></h3>
               <p class="product-price"><span>Product price</span></p>
            </div>
        </a>
    </div>
    ...
</div>

我想知道是否有办法通过 .product-info.product-title 使用 javascript 升序或降序对 product-# div 进行排序，我该怎么做？

Answer 1

Id 使用 jQuery 捕获所有产品元素并下划线 javascript 进行排序。

Products:
<div class="products">
    <div class="product">
        <div class="name">B name</div>
    </div>
    <div class="product">
        <div class="name">C name</div>
    </div>
    <div class="product">
        <div class="name">A name</div>
    </div>
</div>


<br/>

Sort Products:
    <button id="asc">Ascending</button>
    <button id="desc">Descending</button>

<script type="text/javascript">
    function sortList(dir) {
        var $products = $('.products .product');
        var sorted = _.sortBy($products, function(product){
            return $(product).find('.name').html();
        });
        if (dir == "desc") {
            sorted.reverse();
        }
        $('.products').append($(sorted));
    }

    $('#asc').click(function() {
        sortList('asc');
    });


    $('#desc').click(function() {
        sortList('desc');
    });
</script>

http://jsfiddle.net/jL4dX/3/

尽管 jQuery 和 underscore 结合在一起，但如果您只需要为这种排序加载这两个库而不需要其他任何东西，那么将加载几个 kb-s 的多余代码。