Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Сравнение разного содержимого одного Class (https://javascript.ru/forum/events/44238-sravnenie-raznogo-soderzhimogo-odnogo-class.html)

Elphet 12.01.2014 14:22

Сравнение разного содержимого одного Class
 
Доброго времени суток.

-Есть таблица, обернутая в уникальный id="statsent"
-Есть в таблице даты, которые обернуты в class="staton"
Даты есть как совпадающие так и разные!

-Есть код (все условия в коде не прописываю, дабы не разводить воды, условия функционируют прекрасно):
------------------------------------------------
var x = $('.staton').html(); //дата статуса

if (x! > y){document.getElementById('statsent').innerHTML = document.getElementById('statsent').innerHTML.replace(new RegExp($('.staton').html(),'g') , '<span style="color:red">Ожидается сегодня с ' + time0 +' </span> ');
}

//y - переменная с эталонной датой
//time0 - переменная на которую заменяется содержимое

------------------------------------------------
Код работает, но выявилась проблема - в class заменяются все совпадающие даты с первым class!

Для наглядности:
1 <div class="staton">12.01.2014</div>
2 <div class="staton">25.03.2014</div>
3 <div class="staton">12.01.2014</div>

Заменятся только 1 и 3, так как они похожи. Если сделать 2ю строку с датой 12.01.2014, то и она заменится.
А нужно чтобы каждая дата сравнилась с текущей и заменилась по своему условию, которые уже есть.

Что думаю:
Выводя переменную ч/з alert(x); видно, что переменная записывается лишь один раз, ловя первое совпадение. и дальше заменяет все совпадения с этой переменной.

Вопрос: Подскажите, как сделать чтобы каждая дата проверялась и заменялась по условию.

рони 12.01.2014 14:28

Цитата:

Сообщение от Elphet
$('.staton').

упрощённо это массив дат -- при запросе html(); отдаётся первое значение массива -- нужно проверить все используйте each -- ближайший пример тут

Elphet 12.01.2014 15:57

Спасибо за подсказку. Но я уже больше часа сижу c each и как то не вяжется, кстати изначально я пробовал через each, даже match пытался приплести, но так как изучаю js недавно- результат при постановке each мне выдает такой, что каждый символ в Staton он заменяет на фразу, в итоге получается что у меня целая страница, состоящая из фраз.

Код удалил,вернулся к началу,
$(document).ready(function(){
    $('.staton').each(function(){
});
});

Пробую обратиться через this, но он не обращается и я не могу найти результаты.

Я понимаю что и как должно описываться, но с синтаксисом пока что проблемы, может быть кто-нибудь поможет преобразовать код под each?

Есть еще пара нюансов
Дата в staton выглядит так:
12.01.2014 13:00
либо так:
12.01.2014 с 14:00

Чтобы сравнить условия, я разбиваю дату и записываю их в переменную.
var x = $('.staton').html() //дата статуса  
 var time = x.split(' ')[1] || ''; // Время конца смены
 var time0 = x.split('c ')[1] || ''; // Время конца смены если оффлайн
 var dodate= x.split(' ',1) //Дата начала смены
 var prodate= x.split('.20',1) //Дата начала смены

а после сравниваю отдельные части между собой и вывожу в результат.
как вот это связать с each ума не приложу.

Форумчане, выручайте...
Я этот то код начинал писать до нового года... еще столько же мои нервы не выдержат...
Пока что пытаюсь как могу. Заранее спасибо.

Elphet 12.01.2014 16:01

Вот целиковый код:

function replace2(){
 
 var x = $('.staton').html() //дата статуса  
 var y = $(".tim").html(); //время текущее
 var a = "$DATE$" //Дата текущего времени

 var time = x.split(' ')[1] || ''; // Время конца смены
 var time0 = x.split('c ')[1] || ''; // Время конца смены если оффлайн
 var dodate= x.split(' ',1) //Дата начала смены
 var prodate= x.split('.20',1) //Дата начала смены
 
  
if (dodate+" c "+time0 == "$DATE$"+" c "+time0 && time0 > "$TIME$" ){document.getElementById('statsent').innerHTML = document.getElementById('statsent').innerHTML.replace(new RegExp($('.staton').html(),'g') , '<span style="color:red">Ожидается сегодня с ' + time0 +' </span> ');
}
if (dodate+" c "+time0 == "$DATE$"+" c "+time0 && time0 < "$TIME$" ){document.getElementById('statsent').innerHTML = document.getElementById('statsent').innerHTML.replace(new RegExp($('.staton').html(),'g') , '<span style="color:red">Оффлайн</span> ');
}
 if (x!="$DATE$"+" c "+time0 && dodate==a&&x > y){document.getElementById('statsent').innerHTML = document.getElementById('statsent').innerHTML.replace(RegExp($('.staton').html(),'g') , '<span style="color:green"><b>Онлайн до '+time+'</b></span>');
}
 if (x!="$DATE$"+" c "+time0 && dodate==a&& x < y ){document.getElementById('statsent').innerHTML = document.getElementById('statsent').innerHTML.replace(new RegExp($('.staton').html(),'g') , '<span style="color:red">Оффлайн</span> ');
}
if (dodate > a ){document.getElementById('statsent').innerHTML = document.getElementById('statsent').innerHTML.replace(new RegExp($('.staton').html(),'g') , '<span style="color:red">Оффлайн до '+ prodate + ' ' + time0 +' </span> ');
}
if (dodate < a ){document.getElementById('statsent').innerHTML = document.getElementById('statsent').innerHTML.replace(new RegExp($('.staton').html(),'g') , '<span style="color:red">Оффлайн</span> ');
}

}
 setTimeout("replace2();", 1000)

рони 12.01.2014 16:04

Elphet,
вы напишите что в начале на странице -- что должно быть потом и Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Elphet 12.01.2014 16:15

Упрощенно что у меня на странице:
Пусть текущее время: 12.01.2014 12:00

<div id="statsent">
<table>
<tr><td><span class="staton">12.01.2014 17:00</div></td></tr>
<tr><td><span class="staton">13.01.2014 с 12:00</div></td></tr>
<tr><td><span class="staton">11.01.2014 08:00</div></td></tr>
<tr><td><span class="staton">12.01.2014 17:00</div></td></tr>
</table>
</div>


"12.01.2014 17:00" больше текущего, значит "онлайн"
"13.01.2014 с 12:00" больше текущего и есть между датой буква с, значит "оффлайн до 13.01 12:00"
"11.01.2014 08:00" меньше текущего, значит "оффлайн"
"12.01.2014 17:00" снова больше текущего, значит "онлайн"

То есть что должно получиться

<div id="statsent">
<table>
<tr><td><span class="staton">Онлайн до 17:00</div></td></tr>
<tr><td><span class="staton">Оффлайн до 13.01 12:00</div></td></tr>
<tr><td><span class="staton">Оффлайн</div></td></tr>
<tr><td><span class="staton">Онлайн до 17:00</div></td></tr>
</table>
</div>

Zuenf 12.01.2014 16:19

Попробуй так
function replace(elem){
 var x =  $(elem).html() //дата статуса  
 var y = $(".tim").html(); //время текущее
 var a = "$DATE$" //Дата текущего времени

 var time = x.split(' ')[1] || ''; // Время конца смены
 var time0 = x.split('c ')[1] || ''; // Время конца смены если оффлайн
 var dodate= x.split(' ',1) //Дата начала смены
 var prodate= x.split('.20',1) //Дата начала смены

//Далее твои условия
}

$(function(){
$('.staton').each(function(){
 replace(this);
});
});

рони 12.01.2014 16:51

Elphet,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>

        function replace(elem){
 var x =  $(elem).text() //дата статуса
 var y = new Date(); //время текущее
 x = x.match(/\S+/g);
 var hours = x.pop();
 var data = new Date(x[0].split('.').reverse().join('/')+ ' ' +hours)
 var text = 'Оффлайн';
 if  (data.getTime() > y && x[1] != 'с')  text = 'Онлайн до '+hours
 if  (data.getTime() > y && x[1] == 'с')  text = 'Оффлайн до '+x[0].slice(0,5) + ' ' +hours;
 $(elem).text(text)
}

$(function(){
$('.staton').each(function(){
 replace(this);
});
});


  </script>
</head>

<body>
   <div id="statsent">
<table>
<tr><td><span class="staton">12.01.2014 17:00</span></td></tr>
<tr><td><span class="staton">13.01.2014 с 12:00</span></td></tr>
<tr><td><span class="staton">11.01.2014 08:00</span></td></tr>
<tr><td><span class="staton">12.01.2014 17:00</span></td></tr>
</table>
</div>


</body>

</html>

Zuenf 12.01.2014 17:14

рони,только наверное без двойной конструкции $();
Хотя это не критично.

рони 12.01.2014 17:33

Цитата:

Сообщение от Zuenf
без двойной конструкции $();

убрал

Elphet 12.01.2014 20:59

Класс!)))) Все работает!!!!))))
Мне бы понадобилось несколько вечеров чтобы это написать!
БОльшое спасибо!

Я, если честно, не думал, что на форуме найдется человек, который сможет мне вот так прямо сегодня же взять и подсказать.

Рони, Вы спасли мои нервы! Поэтому со своей стороны предлагаю Вам воспользоваться моими услугами:

Создание профессиональной аудиорекламы, профессиональное озвучание дикторами с России и Украины.
Если нужно будет сделать рекламу, то лично мои услуги для вас совершенно бесплатно. Все контакты отсылаю в личку!

Elphet 12.01.2014 23:19

Подскажите еще как прикрутить к этому коду, чтобы онлайн было зеленым цветом, а оффлайн красным?

-Стандартный способ <span style="color:red"></span> не работает.
-Команду .style.color='red' поподставлял в разные места - результат также нулевой.

Zuenf 13.01.2014 00:09

В CSS пропиши свойства для классов .online и .offline
А JS переделай вот так:
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>

 function replace(elem){
 var x =  $(elem).text() //дата статуса
 var y = new Date(); //время текущее
 x = x.match(/\S+/g);
 var hours = x.pop();
 var data = new Date(x[0].split('.').reverse().join('/')+ ' ' +hours)
 var text = 'Оффлайн';
 var online = false;
 if  (data.getTime() > y && x[1] != 'с'){ 
 text = 'Онлайн до '+hours;
 online = true;
}
 if  (data.getTime() > y && x[1] == 'с') text = 'Оффлайн до '+x[0].slice(0,5) + ' ' +hours;

 if(online) $(elem).removeClass('offline').addClass('online');
 else $(elem).removeClass('online').addClass('offline');

 $(elem).text(text);
}

$(function(){
$('.staton').each(function(){
 replace(this);
});
});


  </script>
</head>

<body>
   <div id="statsent">
<table>
<tr><td><span class="staton">12.01.2014 17:00</span></td></tr>
<tr><td><span class="staton">13.01.2014 с 12:00</span></td></tr>
<tr><td><span class="staton">11.01.2014 08:00</span></td></tr>
<tr><td><span class="staton">12.01.2014 17:00</span></td></tr>
</table>
</div>


</body>

</html>

kostyanet 13.01.2014 15:38

Похоже на читерский скрипт. Для своих собственных страниц так не пишут.

Elphet 13.01.2014 18:26

Zuenf, красота!)) работает как часы, а главное через css можно форматировать стили =)
Спасибо, мое предложение по рекламным услугам в силе и для вас! Буду рад помочь.

----------------------------------
А что касается:

Цитата:

Сообщение от kostyanet (Сообщение 291909)
Похоже на читерский скрипт. Для своих собственных страниц так не пишут.

Ты не прав.
Есть задача - есть решение, а подозрения оставь при себе.

kostyanet 14.01.2014 04:09

Я имел ввиду что парсят только чужие страницы. Свои собственные удобряют готовой к употреблению датой.

html и css это, конечно, тоже данные, но замкадовые. В результате вы бегаете за мкад чтобы принести что-то под стены кремля. MVC сосет.

Elphet 14.01.2014 22:54

Ну да, насчет этого ты прав. Движок изначально получается закрытый и у меня нет доступа к базе данных и php ограничен, бред конечно, но вариант в целом адаптирован под все нужды да и в остальном платформа отлично подходит под то что мне нужно, плюс не надо перестраивать и все писать с нуля, поэтому сейчас пришлось прибегнуть к обходным путями, кстати очень даже удачно и грамотно получилось =)


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