2

私はこのページを持っています：

<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-# div を .product-info.product-title の昇順または降順に javascript で並べ替える方法があるかどうか疑問に思っていましたが、どうすればそれを行うことができますか?

4

1 に答える 1

4

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 とアンダースコアは連携していますが、この並べ替えのためだけに両方のライブラリをロードする必要がある場合は、数 kb の余分なコードがロードされることになります。

于 2013-01-23T05:56:54.843 に答える