Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Вывод отсортированных элементов (https://javascript.ru/forum/events/63693-vyvod-otsortirovannykh-ehlementov.html)

Diana123456 23.06.2016 13:34

Вывод отсортированных элементов
 
Вложений: 1
$("#buttonSort").click(function () {
                if ($('#SortByName').is(':checked')) {
                    var mylist = $('.entered_data');
                    var listitems = mylist.children('div').get();
                    console.log(listitems);
                    console.log(typeof listitems);
                    listitems.sort(function (a, b) {
                        var compA = $(a).text();
                        var compB = $(b).text();
                        return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
                    });
                    $.each(listitems, function (idx, itm) {
                        mylist.append(itm);
                    });
                }
               
                else if ($('#SortByDateStart').is(':checked')) {
                    $('.entered_data').each(function () {
                    var startdate = $(this);
                    var startdateitm = startdate.find('h3').get();
                    console.log(startdateitm);
                    console.log(typeof startdateitm);//1
                    var text2 = $(startdateitm).text();
                    console.log(text2);
                    console.log(typeof text2);//2
                    var text22 = text2.split(/(?=(?:\d{4})+(?!\d))/);
                    console.log(text22);
                    console.log(typeof text22);//3
                    var map = text22.map(function (e, i) {
                        return {index: i, value: e};
                    });
                    console.log(map);
                    console.log(typeof map);//4
                    map.sort(function (a, b) {
                        return new Date(a.value).getTime() - new Date(b.value).getTime();
                    });
                    console.log(map);
                    console.log(typeof map);//5
                    var result = map.map(function (e) {
                        return text22[e.index];
                    });
                    console.log(result);
                    console.log(typeof result);//6
                   $.each(result, function (idx, itm) {
                        $('.entered_data').append(itm);
                    });
                    });
                }


Есть код сортировки элементов по именам и по датам. По имени сортировка происходит, по датам - нет, отсортированные данные выводятся внизу блока. Как это можно исправить?

рони 23.06.2016 15:34

Diana123456,
лучше полный макет c html.

Diana123456 23.06.2016 15:52

https://jsfiddle.net/w1spmsad/
- Здесь html
А вот так выглядит подключаемый json
{
"items": [
{
"name": "Alla",
"lastname": "Petrova",
"description": "Working in Moscow",
"dateofstart": "2010-11-10",
"dateofend": "2020-01-01"
},
{
"name": "Victor",
"lastname": "Alekseev",
"description": "Working in Moscow",
"dateofstart": "2009-09-10",
"dateofend": "2030-04-05"
},
{
"name": "Petr",
"lastname": "Dontsov",
"description": "Working in Moscow",
"dateofstart": "2020-10-10",
"dateofend": "2060-09-05"
},
{
"name": "Victor",
"lastname": "Alekseev",
"description": "Working in Moscow",
"dateofstart": "2009-09-10",
"dateofend": "2040-05-03"
}
]
}

рони 23.06.2016 16:50

Diana123456,
попробуйте так
$("#buttonSort").click(function() {
        $("#SortByName").is(":checked") ? dataObj.items.sort(function(a, b) {
            a = a.name;
            b = b.name;
            return a < b ? -1 : a > b ? 1 : 0
        }) : $("#SortByLastName").is(":checked") ? dataObj.items.sort(function(a, b) {
            a = a.lastname;
            b = b.lastname;
            return a < b ? -1 : a > b ? 1 : 0
        }) : $("#SortByDateStart").is(":checked") ? dataObj.items.sort(function(a, b) {
            return (new Date(a.dateofstart)).getTime() - (new Date(b.dateofstart)).getTime()
        }) : $("#SortByDateEnd").is(":checked") && dataObj.items.sort(function(a, b) {
            return (new Date(a.dateofend)).getTime() -  (new Date(b.dateofend)).getTime()
        });
        $(".entered_data").html("");
        testProject.render()
    })

Diana123456 23.06.2016 17:09

С ума сойти, вы гений! То, что я пыталась сделать через 300 строк кода вы написали в 20. Это магия, не иначе. Спасибо вам огромное!

рони 23.06.2016 18:08

Diana123456,
тоже самое чуть покороче :)
$("#buttonSort").click(function() {
    function d(a) {
        return (new Date(a)).getTime()
    }
    var e = $(":checked").index("[name='sort']"),
        c = [{key: "name"}, {key: "lastname"}, {key: "dateofstart",foo: d}, {key: "dateofend",foo: d}][-1 < e ? e : 0];
    dataObj.items.sort(function(a, b) {
        a = a[c.key];
        b = b[c.key];
        c.foo && (a = c.foo(a), b = c.foo(b));
        return a < b ? -1 : a > b ? 1 : 0
    });
    $(".entered_data").html("");
    testProject.render()
});

Diana123456 23.06.2016 20:52

О, спасибо вам огромное!
Буду учиться грамотному коду на вашем примере:thanks:

рони 23.06.2016 21:12

Цитата:

Сообщение от Diana123456
грамотному коду

для грамотного, переменным и функциям лучше давать осмысленные названия,
на всякий случай
Как писать неподдерживаемый код?

Diana123456 24.06.2016 01:28

Спасибо вам, я почитаю. Книгу эту частично проходила, но эту главу обошла стороной.

Vlasenko Fedor 24.06.2016 01:48

рони,
приведенное решение не будет сортировать правильно, так как нет учета локалей https://learn.javascript.ru/intl


Часовой пояс GMT +3, время: 10:52.