Как я могу отсортировать элементы div на основе содержимого / значений внутреннего элемента div, используя javascript / jQuery?

Question

У меня есть X количество div на странице, каждый элемент div представляет один продукт и выглядит так:

<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>

Затем у меня есть список выбора / выпадающий список, из которого я хочу отсортировать деления по цене или по алфавиту.

Например, допустим, у меня есть 10 div (10 продуктов), как показано выше на одной странице. Я хотел бы иметь возможность сортировать по заголовку (контент a.productTitleForSorting) или по цене (span.productPriceForSorting) при изменении списка выбора.

Есть идеи, как мне добиться этого с помощью Javascript / jQuery? Это должно быть сделано на стороне клиента.

Я пытался использовать плагин datasort, но безуспешно, поэтому искал новые идеи и предложения. Спасибо!

Answer 1

вы можете использовать встроенную функцию сортировки, но дело в том, что вы должны предоставить механизм сравнения:

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

тогда вы можете отсортировать ваши элементы, используя:

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

После того, как вы отсортировали элементы, вам нужно обновить html, поэтому вы должны очистить контейнер продукта, а затем добавить отсортированные элементы в новом порядке:

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

Собираем все вместе:

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

вот рабочий пример: http://jsfiddle.net/gion_13/jKJc3/

Answer 2

Я бы не рекомендовал сортировать и переупорядочивать дом. Если это нужно сделать на стороне клиента, сохраните массив javascript и отсортируйте его. Например:

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

Теперь используйте Функции сортировки JavaScript для сортировки и добавления в dom. Это гораздо эффективнее, чем передвигаться по домам.

Answer 3

Используя что-то вроде этого сортировочного плагина , вам просто нужны функции сравнения, такие как:

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