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 следующая за ней, а все что ранее ее это третье?

j0hnik 02.07.2017 15:14 
<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>

</head>

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

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

	<script>
		arr=[];
		$("li a").each(function(indx, element){
			var s = /\D/
			var a = $(this).attr("data-data").split(' ').reverse().join(',').split(s).reverse().join('');
			arr.push(a);
			$(this).attr("data-color", a);
		});
		arr.sort((a, b)=> a - b);
		var i = arr.length;
		while (i--) $('[data-color = '+arr[i]+']').css('color','rgb('+(255-i*20)+','+i*20+',0');
	</script>

</body>
</html>


Цифра 20 это контрастность, если новостей много надо уменьшить

Malleys 02.07.2017 15:33
Если даты не по порядку, то при помощи CSS не получится(?). Хотя если даты в каждом списке отсортированы, то можно обойтись стилями.
Код:
dd:nth-of-type(1) a { color: green }
dd:nth-of-type(2) a { color:red }
В противном случае потребуется функция, которая отсортирует элементы в списке и назначит им классы "свежести"

https://jsfiddle.net/5zp33oxa/

j0hnik 02.07.2017 15:57 
<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>

</head>

<body>
<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 01:22:43 +0000">30 июня, 01: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>
<dl>
<dt data-data="Fri, 30 Jun 2017 02:17:17 +0000">30 июня, 02:17</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-data="Fri, 30 Jun 2017 03:22:43 +0000">30 июня, 03:22</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-data="Fri, 30 Jun 2017 04:15:30 +0000">30 июня, 04:15</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
</dl>

	<script>
		arr=[];
		$("dl dt").each(function(indx, element){
			var s = /\D/
			var a = new Date($(this).attr("data-data")).valueOf();
			arr.push(a);
			$(this).attr("data-color", a);
		});
		arr.sort((a, b)=> a - b);
		for (var i = 0 ; i < arr.length; i++) $('[data-color = '+arr[i]+']').next('dd').children('a').css('color','rgb('+(255-i*30)+','+i*30+',0');
	</script>

</body>
</html>

Переделал под DD-шки если понадобится

malsyst 04.07.2017 12:32
laimas,
Благодарю! Это то, что нужно.

laimas 04.07.2017 13:00
Цитата:
Сообщение от malsyst
Благодарю!
За что?

Цитата:
Сообщение от malsyst
Это то, что нужно.
Что именно? Лично я не понимаю, почему у вас в списке две записи с одной датой, но с разным цветом.


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