Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2013, 18:16
Аспирант
Отправить личное сообщение для webmanss Посмотреть профиль Найти все сообщения от webmanss
 
Регистрация: 17.02.2013
Сообщений: 34

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

Буду рад любой помощи!
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2013, 18:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

webmanss,
почему класс то назначить нельзя? html код где? по форуму этих сортировок ... много.
Ответить с цитированием
  #3 (permalink)  
Старый 17.02.2013, 18:44
Аспирант
Отправить личное сообщение для webmanss Посмотреть профиль Найти все сообщения от webmanss
 
Регистрация: 17.02.2013
Сообщений: 34

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 02.03.2023 в 00:01.
Ответить с цитированием
  #5 (permalink)  
Старый 17.02.2013, 21:29
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А нафига пихать все в классы? Лучше и проще так:
<div data-price="200" data-name="b" data-rating="4">
Ответить с цитированием
  #6 (permalink)  
Старый 17.02.2013, 21:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от danik.js
А нафига пихать все в классы?
можно хоть куда, в скрипте выше только изменить источник сортировки строки 20 21
Ответить с цитированием
  #7 (permalink)  
Старый 18.02.2013, 10:39
Аспирант
Отправить личное сообщение для webmanss Посмотреть профиль Найти все сообщения от webmanss
 
Регистрация: 17.02.2013
Сообщений: 34

Спасибо огромное рони!
Искал много, в основном все под таблицы заточено.
Не сочтите за наглость), просто совсем ноль в скриптах.
Как привязать картинки (со стрелками) к ссылкам, чтобы по клику сортировка по убыванию, по второму клику менялась картинка на возрастание?
Ответить с цитированием
  #8 (permalink)  
Старый 18.02.2013, 11:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

webmanss,
хоть ссылки то на картинки up dn сбросьте )))
Ответить с цитированием
  #9 (permalink)  
Старый 18.02.2013, 11:30
Аспирант
Отправить личное сообщение для webmanss Посмотреть профиль Найти все сообщения от webmanss
 
Регистрация: 17.02.2013
Сообщений: 34

Имеется в виду, что картинки будут задаваться через свойства бекграундом.
например:
<a href="#" id="price">цена</a>

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

Только вот как эти свойства менять динамически? не знаю
Изображения:
Тип файла: jpg but.jpg (1.8 Кб, 9 просмотров)

Последний раз редактировалось webmanss, 18.02.2013 в 11:41.
Ответить с цитированием
  #10 (permalink)  
Старый 18.02.2013, 12:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сортировка и фильтрация json jQuery amt779 jQuery 4 28.07.2011 12:53
Сортировка и фильтрация в селекторе amt779 jQuery 1 08.07.2011 03:09
Подбор по параметрам для поиска в каталоге товаров(интерестная версия) dmi3y Ваши сайты и скрипты 5 25.12.2009 13:55
Печать невидимых блоков mixeeff Events/DOM/Window 7 11.03.2009 11:41