Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2017, 12:07
Аспирант
Отправить личное сообщение для malsyst Посмотреть профиль Найти все сообщения от malsyst
 
Регистрация: 20.07.2012
Сообщений: 80

Выборка по дате публикации с изменением цвета ссылки
Всем доброго времени суток. Подскажите, пожалуйста, как сделать выборку по дате:
Имеется список новостей следующего вида
<dl>
<dt data-data="Fri, 30 Jun 2017 12:17:17 +0000">30 июня, 12:17</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-data="Fri, 30 Jun 2017 11:22:43 +0000">30 июня, 11:22</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-data="Fri, 30 Jun 2017 11:15:30 +0000">30 июня, 11:15</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
</dl>


Через data-data передаю дату публикации (могу указать любой вариант формирования даты и время через php)

Нужно написать скрипт, который будет находить первую по дате публикации новость и выделять одним цветом, вторую – другим и т.д.

Если бы список dl был один, то решил бы вопрос с помощью CSS:
<style>
dd:nth-child(1) a {color: lime}
dd:nth-child(2) a {color:red}
</style>


но списков dl много
<dl>
	<dt>..</dt>
	<dd>..</dd>
	<dt>..</dt>
	<dd>..</dd>
	<dt>..</dt>
	<dd>..</dd>
</dl>
<dl>
	<dt>..</dt>
	<dd>..</dd>
	<dt>..</dt>
	<dd>..</dd>
	<dt>..</dt>
	<dd>..</dd>
</dl>
..

Я так понимаю, что нужно пройтись по всем атрибутам data-data элементов dt, сверить дату и время с текущей (текущую дату и время могу вывести через php, если нужно, и загнать в переменную) и назначить первой dd один цвет ссылки, второй – другой цвет и т.д. Но как реализовать всё это на jQuery не знаю. Поэтому и пишу сюда. Надеюсь на ваши подсказки
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2017, 12:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

malsyst,
не понял
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2017, 12:43
Аспирант
Отправить личное сообщение для malsyst Посмотреть профиль Найти все сообщения от malsyst
 
Регистрация: 20.07.2012
Сообщений: 80

рони,
Есть список из новостей.. Пусть он будет через ul, не важно:
<ul>
	<li><a href="#">02.07.2017 12:38 - Lorem ipsum dolor sit amet.</a></li>
	<li><a href="#">01.07.2017 10:30 - Lorem ipsum dolor sit amet.</a></li>
	<li><a href="#">31.06.2017 11:32 - Lorem ipsum dolor sit amet.</a></li>
</ul>

<ul>
	<li><a href="#">02.07.2017 11:38 - Lorem ipsum dolor sit amet.</a></li>
	<li><a href="#">01.07.2017 10:41 - Lorem ipsum dolor sit amet.</a></li>
	<li><a href="#">31.06.2017 09:30 - Lorem ipsum dolor sit amet.</a></li>
</ul>

И нужно изменить цвет ссылки для элементов по дате публикации по убыванию:
Т.е.
02.07.2017 12:38 – сделать одним цветом
02.07.2017 11:38 – другим
01.07.2017 10:41 – третьим
И т.д

Последний раз редактировалось malsyst, 02.07.2017 в 12:46.
Ответить с цитированием
  #4 (permalink)  
Старый 02.07.2017, 12:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

malsyst,
мне сложно понять причём тут дата, и в какой цвет вы хотите сделать ссылки.
можно увидеть конечный результат?
Ответить с цитированием
  #5 (permalink)  
Старый 02.07.2017, 13:02
Аспирант
Отправить личное сообщение для malsyst Посмотреть профиль Найти все сообщения от malsyst
 
Регистрация: 20.07.2012
Сообщений: 80

рони,

Последний раз редактировалось malsyst, 02.07.2017 в 13:04.
Ответить с цитированием
  #6 (permalink)  
Старый 02.07.2017, 13:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

malsyst,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$("li a, dd a").each(function(indx, element){
      $(this).css("color", "#" + ("000000" + (Math.random() * 0xffffff | 0).toString(16)).slice(-6))
      });
});
  </script>
</head>

<body>
<ul>
  <li><a href="#">02.07.2017 12:38 - Lorem ipsum dolor sit amet.</a></li>
  <li><a href="#">01.07.2017 10:30 - Lorem ipsum dolor sit amet.</a></li>
  <li><a href="#">31.06.2017 11:32 - Lorem ipsum dolor sit amet.</a></li>
</ul>

<ul>
  <li><a href="#">02.07.2017 11:38 - Lorem ipsum dolor sit amet.</a></li>
  <li><a href="#">01.07.2017 10:41 - Lorem ipsum dolor sit amet.</a></li>
  <li><a href="#">31.06.2017 09:30 - Lorem ipsum dolor sit amet.</a></li>
</ul>
<dl>
<dt data-data="Fri, 30 Jun 2017 12:17:17 +0000">30 июня, 12:17</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-data="Fri, 30 Jun 2017 11:22:43 +0000">30 июня, 11:22</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-data="Fri, 30 Jun 2017 11:15:30 +0000">30 июня, 11:15</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
</dl>


</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 02.07.2017, 13:36
Аспирант
Отправить личное сообщение для malsyst Посмотреть профиль Найти все сообщения от malsyst
 
Регистрация: 20.07.2012
Сообщений: 80

рони,
Дело в том, что цвет ссылки зависит от даты создания новости. Самая свежая новость в блоке с несколькими списками выделяется зелёным цветом, следующая, по дате создания, оранжевым, а следующая - красным. И таких списков в блоке несколько.
Ответить с цитированием
  #8 (permalink)  
Старый 02.07.2017, 13:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

malsyst,
видимо не могу вам помочь
Ответить с цитированием
  #9 (permalink)  
Старый 02.07.2017, 13:57
Аспирант
Отправить личное сообщение для malsyst Посмотреть профиль Найти все сообщения от malsyst
 
Регистрация: 20.07.2012
Сообщений: 80

рони,
ничего, всё равно благодарю за отзывчивость!
Ответить с цитированием
  #10 (permalink)  
Старый 02.07.2017, 13:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

malsyst, то есть 02.07.2017 12:38, это самая свежая, 02.07.2017 12:37 следующая за ней, а все что ранее ее это третье?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение цвета ссылки в зависимости от ее адреса theVid jQuery 1 06.10.2012 19:56
Изменением цвета рядка таблицы по onMouseOver - проблема Flashbacks Элементы интерфейса 2 08.04.2012 14:52
Смена фона и цвета ссылки, если посетитель находиться на ней Gawk Общие вопросы Javascript 4 19.02.2012 15:27
Изменение цвета ссылки с помощью js Alex Pacifik Элементы интерфейса 3 31.01.2012 15:08
Изменение цвета ссылки. bpystep Общие вопросы Javascript 17 18.11.2011 18:41