Сортировка блоков по параметрам
Здравствуйте форумчане.
Есть несколько блоков div у каждого свои параметры: цена, рейтинг, название и т.д Нужно осуществить сортировку этих блоков по возрастанию и убыванию соответственно. Задавать параметры блокам через id или class не получается т.к. их несколько. Буду рад любой помощи! |
webmanss,
почему класс то назначить нельзя? html код где? по форуму этих сортировок ... много. |
Через классы так?
<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> |
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>
|
А нафига пихать все в классы? Лучше и проще так:
<div data-price="200" data-name="b" data-rating="4"> |
Цитата:
|
Спасибо огромное рони!
Искал много, в основном все под таблицы заточено. Не сочтите за наглость), просто совсем ноль в скриптах. Как привязать картинки (со стрелками) к ссылкам, чтобы по клику сортировка по убыванию, по второму клику менялась картинка на возрастание? |
webmanss,
хоть ссылки то на картинки up dn сбросьте ))) |
Вложений: 1
Имеется в виду, что картинки будут задаваться через свойства бекграундом.
например: <a href="#" id="price">цена</a>
<style>
#price {
background:url(img/up.jpg) right;
color:#000;
border-bottom: dotted #000000 1px;
text-decoration:none;
}
</style>
Только вот как эти свойства менять динамически? не знаю |
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>▲</span><span>▼</span></a>
<a href="#" id="name">название<span>▲</span><span>▼</span></a>
<a href="#" id="rating">рейтинг<span>▲</span><span>▼</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>
|
Спасибо за помощь. Но это не совсем то, что нужно.
Теперь скрипт срабатывает не по сслыке, а по span. В идеале и ссылка и картинка должны срабатывать. Или хотябы только ссылка, но при этом картинка показывающая в каком направлении порядок (убывание или возрастание) должна меняться. Есть простой скрипт для смены картинок пытаюсь прикрутить
<script>
function chg(id){
if (document.getElementById(id).src.indexOf("http://plasmon.rghost.ru/43891024/image.png")>0){
document.getElementById(id).src="http://tau.rghost.ru/43890984/image.png"
}else{
document.getElementById(id).src="http://plasmon.rghost.ru/43891024/image.png"
}
}
</script>
<img src="http://plasmon.rghost.ru/43891024/image.png" id="img_1" onClick="chg(this.id)"> но пока безуспешно( очень хочется доделать, кто поможет? |
Ребят, помогите довести дело до ума!
Могу денежку на тел. кинуть в знак благодарности) |
webmanss,
сначала подумай что ты предлагаешь - нажали на кнопку отсортировала цену по возрастающей 1-2-3 нажали другую сортировку -- хотим снова отсортировать цену по возрастающей - а нет фига сначала отсортируем вниз а потом жми ещё раз чтоб получить то что надо. |
рони,
Первый твой скрипт правильно работал. По нажатию ссылки происходит сортировка. Просто нужно графическое соответствие, чтобы пользователь понимал что произошло. Я просмотрел множество примеров, но они все сделаны на таблицах вот |
webmanss,
первый скрипт сортирует только в одну сторону |
точно, даже не заметил)
что же теперь все заново? |
Можешь подсказать какая это сортировка? нужно вычислить ее сложность.
|
Цитата:
|
| Часовой пояс GMT +3, время: 21:01. |