How can I sort div elements based on inner div element contentvalues using javascriptjQuery? - Stack Overflow

admin管理员组

文章数量:1023764

I have X amount of divs in a page, each div item represents a single product and looks like this:

<div class="productContainer">
<li>
    <img src="my-product-image.jpg"></a>
    <div class="productInfo">
        <h4>
            <!-- SORT ALL DIVS BASED ON A TAG CONTENT -->
            <a class="productTitleForSorting" href="product-page-link">NAME</a><br>
        </h4>
        <div class="product-price">               
            <span id="lowestPrice">PRICE:
            <!-- OR SORT ALL DIVS BY PRODUCT PRICE SPAN CONTENT -->
            <span class="productPriceForSorting">$XX.XX</span></span>
        </div>
    </div>               
</li>
</div>

Then I have a select list / dropdown list from where I'd like to sort the divs by price or alphabetically.

For example, let's say I have 10 divs (10 products), like the one above on a single page. I would like to be able to sort either by title (a.productTitleForSorting content), or by price (span.productPriceForSorting) on select list change.

Any ideas how I can go about acplishing this with Javascript / jQuery? It has to be done on the client side.

I tried using a datasort plugin, but no luck with that one, so looking for new ideas and suggestions. Thanks!

I have X amount of divs in a page, each div item represents a single product and looks like this:

<div class="productContainer">
<li>
    <img src="my-product-image.jpg"></a>
    <div class="productInfo">
        <h4>
            <!-- SORT ALL DIVS BASED ON A TAG CONTENT -->
            <a class="productTitleForSorting" href="product-page-link">NAME</a><br>
        </h4>
        <div class="product-price">               
            <span id="lowestPrice">PRICE:
            <!-- OR SORT ALL DIVS BY PRODUCT PRICE SPAN CONTENT -->
            <span class="productPriceForSorting">$XX.XX</span></span>
        </div>
    </div>               
</li>
</div>

Then I have a select list / dropdown list from where I'd like to sort the divs by price or alphabetically.

For example, let's say I have 10 divs (10 products), like the one above on a single page. I would like to be able to sort either by title (a.productTitleForSorting content), or by price (span.productPriceForSorting) on select list change.

Any ideas how I can go about acplishing this with Javascript / jQuery? It has to be done on the client side.

I tried using a datasort plugin, but no luck with that one, so looking for new ideas and suggestions. Thanks!

• javascript
• jquery
• html
• sorting

Share Improve this question Follow asked Jul 21, 2011 at 14:27 IntricatePixelsIntricatePixels 1,22966 gold badges2929 silver badges5555 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I would not remend sorting and reordering the dom. If it has to be done on client side then store the javascript array and sort that. For example:

var items = [{price:3,name:"something"}, {price:10,name:"somethingelse"}];

Now use JavaScript sort functions to sort this and append to the dom. This is much more efficient than moving around dom objects.

you can use the native sort function, but the thing is that you have to provide a parison mechanism:

function sortByPrice(a,b){
    return $(a).find('.productPriceForSorting').text() > $(b).find('.productPriceForSorting').text();
}

then you can sort your elements by using:

$('.productContainer').sort(sortByPrice);

After you've sorted the elements, you need to update the html, so you should empty the product container and then append the sorted elements in the new order :

function reorderEl(el){
    var container = $('#productList');
    container.html('');
    el.each(function(){
        $(this).appendTo(container);
    });
}

Putting it all toghether :

reorderEl($('.productContainer').sort(sortByPrice));

here's a working example: http://jsfiddle/gion_13/jKJc3/

Using something like this sorting plugin, you just need parator functions like:

function sortByTag(a, b) {
  $(a).find('a').first().text() > $(b).find('a').first().text();
}

I have X amount of divs in a page, each div item represents a single product and looks like this:

<div class="productContainer">
<li>
    <img src="my-product-image.jpg"></a>
    <div class="productInfo">
        <h4>
            <!-- SORT ALL DIVS BASED ON A TAG CONTENT -->
            <a class="productTitleForSorting" href="product-page-link">NAME</a><br>
        </h4>
        <div class="product-price">               
            <span id="lowestPrice">PRICE:
            <!-- OR SORT ALL DIVS BY PRODUCT PRICE SPAN CONTENT -->
            <span class="productPriceForSorting">$XX.XX</span></span>
        </div>
    </div>               
</li>
</div>

Then I have a select list / dropdown list from where I'd like to sort the divs by price or alphabetically.

For example, let's say I have 10 divs (10 products), like the one above on a single page. I would like to be able to sort either by title (a.productTitleForSorting content), or by price (span.productPriceForSorting) on select list change.

Any ideas how I can go about acplishing this with Javascript / jQuery? It has to be done on the client side.

I tried using a datasort plugin, but no luck with that one, so looking for new ideas and suggestions. Thanks!

I have X amount of divs in a page, each div item represents a single product and looks like this:

<div class="productContainer">
<li>
    <img src="my-product-image.jpg"></a>
    <div class="productInfo">
        <h4>
            <!-- SORT ALL DIVS BASED ON A TAG CONTENT -->
            <a class="productTitleForSorting" href="product-page-link">NAME</a><br>
        </h4>
        <div class="product-price">               
            <span id="lowestPrice">PRICE:
            <!-- OR SORT ALL DIVS BY PRODUCT PRICE SPAN CONTENT -->
            <span class="productPriceForSorting">$XX.XX</span></span>
        </div>
    </div>               
</li>
</div>

Then I have a select list / dropdown list from where I'd like to sort the divs by price or alphabetically.

For example, let's say I have 10 divs (10 products), like the one above on a single page. I would like to be able to sort either by title (a.productTitleForSorting content), or by price (span.productPriceForSorting) on select list change.

Any ideas how I can go about acplishing this with Javascript / jQuery? It has to be done on the client side.

I tried using a datasort plugin, but no luck with that one, so looking for new ideas and suggestions. Thanks!

• javascript
• jquery
• html
• sorting

Share Improve this question Follow asked Jul 21, 2011 at 14:27 IntricatePixelsIntricatePixels 1,22966 gold badges2929 silver badges5555 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I would not remend sorting and reordering the dom. If it has to be done on client side then store the javascript array and sort that. For example:

var items = [{price:3,name:"something"}, {price:10,name:"somethingelse"}];

Now use JavaScript sort functions to sort this and append to the dom. This is much more efficient than moving around dom objects.

you can use the native sort function, but the thing is that you have to provide a parison mechanism:

function sortByPrice(a,b){
    return $(a).find('.productPriceForSorting').text() > $(b).find('.productPriceForSorting').text();
}

then you can sort your elements by using:

$('.productContainer').sort(sortByPrice);

After you've sorted the elements, you need to update the html, so you should empty the product container and then append the sorted elements in the new order :

function reorderEl(el){
    var container = $('#productList');
    container.html('');
    el.each(function(){
        $(this).appendTo(container);
    });
}

Putting it all toghether :

reorderEl($('.productContainer').sort(sortByPrice));

here's a working example: http://jsfiddle/gion_13/jKJc3/

Using something like this sorting plugin, you just need parator functions like:

function sortByTag(a, b) {
  $(a).find('a').first().text() > $(b).find('a').first().text();
}

本文标签： How can I sort div elements based on inner div element contentvalues using javascriptjQueryStack Overflow