Как фильтровать / сортировать изображения / блоки в jquery?

Question

У нас есть более 100 изображений на странице.Каждое изображение имеет 3 параметра:

• Год (2007 | 2008 | 2009)
• Цвет (красный | желтый | синий)
• Тип (портрет | панорама)

Как мне отсортировать изображения на странице с этими параметрами (я хочу видеть синий + панорамы + 2007) без перезагрузки страницы - просто выбрав нужные изображения?

PS Я не знаю, как подписывать параметры, в классе я пишу как class = "2009 желтый синий портрет" без использования внешних файлов

Answer 1

Я собираюсь принять следующую разметку ... вы можете адаптировать ее к своей собственной:

<div id="images">
  <div>
    <img src="..." />
    <em>Year: </em><span class="year">2007</span>
    <em>Color: </em><span class="color">red</span>
    <em>Type: </em><span class="type">portrait</span>
  </div>
  <div>
    <img src="..." />
    <em>Year: </em><span class="year">2008</span>
    <em>Color: </em><span class="color">yellow</span>
    <em>Type: </em><span class="type">panoram</span>
  </div>
</div>

Тогда вам понадобится jQuery:

function sortBy(field) {
    var container = $('#images');
    // get a real array of the image divs
    var imgDivList = container.children().get();
    // Put them into the correct order based on the chosen field
    imgDivList.sort(function (a, b) {
        var aText = $(a).children('.' + field).text();
        var bText = $(b).children('.' + field).text();
        if (aText < bText) {
            return 1;
        }
        if (aText > bText) {
            return -1;
        }
        if (aText == bText) {
            return 0;
        }
    });
    // Append them back to the original container
    container.append(imgDivList);
}

Для фильтрации сделайте следующее:

function filter(field, value) {
    var imgDivList = $('#images').children();
    imgDivList.each(function (index, element) {
        if ($(element).children('.' + field).text() == value) {
            $(element).show();
        } else {
            $(element).hide();
        }
    });
}

Answer 2

Это общая идея.Вам необходимо создать истинный массив изображений, а затем отсортировать их с помощью JavaScript array.sort и пользовательской функции.Как только это будет сделано, вы можете append отправить их обратно в DOM, и они сами перестроятся.

arrImages = $('img').get(); // need a true array
arrImages.sort(function(a,b) {
    // write your own sort function here using your parameters
    // return a negative number to sort a before b, positive to sort b before a
});
$.each(arrImages, function(i,el) {
    $('#container').append(el);
});