Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выборка по дате публикации с изменением цвета ссылки (https://javascript.ru/forum/jquery/69543-vyborka-po-date-publikacii-s-izmeneniem-cveta-ssylki.html)

malsyst 02.07.2017 12:07

Выборка по дате публикации с изменением цвета ссылки
 
Всем доброго времени суток. Подскажите, пожалуйста, как сделать выборку по дате:
Имеется список новостей следующего вида
<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 не знаю. Поэтому и пишу сюда. Надеюсь на ваши подсказки

рони 02.07.2017 12:31

malsyst,
не понял

malsyst 02.07.2017 12:43

рони,
Есть список из новостей.. Пусть он будет через 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 – третьим
И т.д

рони 02.07.2017 12:50

malsyst,
мне сложно понять причём тут дата, и в какой цвет вы хотите сделать ссылки.
можно увидеть конечный результат?

malsyst 02.07.2017 13:02

рони,

рони 02.07.2017 13:31

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>

malsyst 02.07.2017 13:36

рони,
Дело в том, что цвет ссылки зависит от даты создания новости. Самая свежая новость в блоке с несколькими списками выделяется зелёным цветом, следующая, по дате создания, оранжевым, а следующая - красным. И таких списков в блоке несколько.

рони 02.07.2017 13:51

malsyst,
видимо не могу вам помочь

malsyst 02.07.2017 13:57

рони,
ничего, всё равно благодарю за отзывчивость!

laimas 02.07.2017 13:58

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


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