Форум

webmanss · #1 (**permalink**) 17.02.2013, 18:16

Здравствуйте форумчане.
Есть несколько блоков div у каждого свои параметры: цена, рейтинг, название и т.д
Нужно осуществить сортировку этих блоков по возрастанию и убыванию соответственно.
Задавать параметры блокам через id или class не получается т.к. их несколько.

Буду рад любой помощи!

рони · #2 (**permalink**) 17.02.2013, 18:30

webmanss,
почему класс то назначить нельзя? html код где? по форуму этих сортировок ... много.

webmanss · #3 (**permalink**) 17.02.2013, 18:44

Через классы так?

<div id="sorting">
<a href="#" id="price">цена</a>
<a href="#" id="name">название</a>
<a href="#" id="rating">рейтинг</a>
</div>

<div id="conteiner">
<div class="price_100 name_a rating_5">Text 1</div>
<div class="price_200 name_b rating_4">Text 2</div>
<div class="price_300 name_c rating_3">Text 3</div>
....

</div>

рони · #4 (**permalink**) 17.02.2013, 21:23

webmanss,
Вариант сортировки по классам ... при условии одинаковой длины сортируемого класса для всех элементов, 100 - 200 но не 30 а 030

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-latest.js" type="text/javascript">

        </script>
        <script type="text/javascript">
            $(function () {
                var a_sort = $('#sorting a');
                var div_conteiner = jQuery.makeArray($('#conteiner div'));
                a_sort.each(function (index, self) {
                    var id = $(self).attr("id");
                    var reg = new RegExp("^.*?(" + id + "\\S+).*?$");
                    $(self).click(function (e) {
                        e.preventDefault();
                        div_conteiner.sort(function f(a, b) {
                            a = a.className.replace(reg, '$1');
                            b = b.className.replace(reg, '$1');
                            var c = 0
                            if (a > b) c = 1;
                            if (a < b) c = -1;
                            return c
                        });
                        $.map(div_conteiner, function (div) {
                            $(div).appendTo($('#conteiner'))
                        });
                    });
                });
            });
        </script>
    </head>

    <body>
        <div id="sorting">
            <a href="#" id="price">цена</a>
            <a href="#" id="name">название</a>
            <a href="#" id="rating">рейтинг</a>
        </div>
        <div id="conteiner">
            <div class="price_200 name_b rating_4">Text 2 price_200 name_b rating_4</div>
            <div class="price_100 name_c rating_5">Text 1 price_100 name_c rating_5</div>
            <div class="price_300 name_a rating_3">Text 3 price_300 name_a rating_3</div>
        </div>
    </body>

</html>

danik.js · #5 (**permalink**) 17.02.2013, 21:29

А нафига пихать все в классы? Лучше и проще так:

<div data-price="200" data-name="b" data-rating="4">

рони · #6 (**permalink**) 17.02.2013, 21:32

Сообщение от danik.js

А нафига пихать все в классы?

можно хоть куда, в скрипте выше только изменить источник сортировки строки 20 21

webmanss · #7 (**permalink**) 18.02.2013, 10:39

Спасибо огромное рони!
Искал много, в основном все под таблицы заточено.
Не сочтите за наглость), просто совсем ноль в скриптах.
Как привязать картинки (со стрелками) к ссылкам, чтобы по клику сортировка по убыванию, по второму клику менялась картинка на возрастание?

рони · #8 (**permalink**) 18.02.2013, 11:03

webmanss,
хоть ссылки то на картинки up dn сбросьте )))

webmanss · #9 (**permalink**) 18.02.2013, 11:30

Имеется в виду, что картинки будут задаваться через свойства бекграундом.
например:

<a href="#" id="price">цена</a>

<style>
#price {
	background:url(img/up.jpg) right; 
	color:#000;
	border-bottom: dotted #000000 1px;
	text-decoration:none; 
}
</style>

Только вот как эти свойства менять динамически? не знаю

рони · #10 (**permalink**) 18.02.2013, 12:29

webmanss,
Ну раз картинок ненашли то без картинок ... дальше сами.

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
a {

	color:#000;
	text-decoration:none;
    cursor:  default;

}
a span {
  cursor: pointer;
}

</style>

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">

        </script>
        <script type="text/javascript">
            $(function () {
                var a_sort = $('#sorting span');
                var div_conteiner = jQuery.makeArray($('#conteiner div'));
                a_sort.each(function (index, self) {
                    var id = $(self).parent().attr("id");
                    $(self).click(function (e) {
                        e.preventDefault();
                        div_conteiner.sort(function f(a, b) {
                            a = $(a).data(id);
                            b = $(b).data(id);
                            var c = 0
                            if (a > b) c = 1;
                            if (a < b) c = -1;
                            return c
                        });
                        if (index%2) div_conteiner.reverse()
                        $.map(div_conteiner, function (div) {
                            $(div).appendTo($('#conteiner'))
                        });
                    });
                });
            });
        </script>
    </head>

    <body>
        <div id="sorting">
            <a href="#" id="price">цена<span>&#9650;</span><span>&#9660;</span></a>
            <a href="#" id="name">название<span>&#9650;</span><span>&#9660;</span></a>
            <a href="#" id="rating">рейтинг<span>&#9650;</span><span>&#9660;</span></a>
        </div>
        <div id="conteiner">
            <div data-price="200" data-name="b" data-rating="4">Text 2 price_200 name_b rating_4</div>
            <div data-price="100" data-name="c" data-rating="5">Text 1 price_100 name_c rating_5</div>
            <div data-price="300" data-name="a" data-rating="3">Text 3 price_300 name_a rating_3</div>
        </div>
    </body>

</html>

Форум

Справочник

Discord чат

Курсы javascript