Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery]Pobieranie id div'a i porównanie z aktualną datą
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
sliderr
29.07.2013, 16:17:00
Na potrzeby mini strony staram się stworzyć pewien skrypt.

Jak ma działać w założeniu:
- Strona odświeża się co określony czas
- Sprawdzana jest aktualna data w formacie dzień.miesiąc.rok.godzina.minuty
- Ze strony chciałbym pobierać id pierwszego diva w containerze
- Następnie id tego diva miałoby być porównane z aktualną datą i jeśli są takie same div miałby być usunięty.

Na czym polega mój problem? Nie mogę zwrócić id div'a pobranego ze strony. Testując co zostało pobrane alert wyrzuca mi "undefinied".

Jeśli napiszę samo pobieranie w tej formie jak w kodzie poniżej to wyrzuca poprawne id, ale div'a "najniżej", a nie pierwszego. Pobieranie id z div

Jeśli ktoś byłby w stanie mi pomóc, aby:
- dało się porównywać aktualną datę z id pierwszego div containerze
- zmienić usuwanie div'a tak, aby nie trzeba było podawać jego id, ponieważ docelowo tych divów chciałbym, aby było dość sporo.

Z góry dzięki jeśli ktoś cokolwiek podpowie.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script src="http://code.jquery.com/jquery-latest.js"></script>
  7. <script type="text/javascript">
  8.  
  9. setInterval("moja_funkcja();",3000); 
  10.  
  11. var aktualna;
  12.  
  13.  
  14. function clock() {
  15.    var now = new Date();
  16.    var outStr = now.getUTCDate()+'.'+ now.getUTCMonth()+'.'+ now.getFullYear()+'.'+ now.getHours()
  17.  
  18. +':'+now.getMinutes();
  19.    aktualna = document.getElementById('clockDiv').innerHTML=outStr;
  20.    setTimeout('clock()',1000);
  21. }
  22. clock();
  23.  
  24. var zestrony;
  25.  
  26. $("#container").children().each(function(n, i) {
  27.   var id = this.id;
  28.     zestrony = id;
  29.  
  30. });
  31.  
  32.  
  33.  
  34. function moja_funkcja() {
  35. 	alert(zestrony);
  36. 	if (ids==aktualna){
  37. 	$('div').remove('.29.6.2013.14:47');
  38. 	}
  39. }
  40.  
  41. </script>
  42. </head>
  43.  
  44. <body onload="clock();">
  45. <div id="clockDiv"></div>
  46. <div id="container">
  47. <div id="29.6.2013.14:47">29.6.2013.14:47</div>
  48. <div id="inny">Inny</div>
  49. </div>
  50. </body>
  51. </html>
[HTML] pobierz, plaintext
IProSoft
29.07.2013, 16:27:44
Jeśli ma to być pierwszy div to zamiast:
[JAVASCRIPT] pobierz, plaintext 
  1. var zestrony;
  2.  
  3. $("#container").children().each(function(n, i) {
  4. var id = this.id;
  5. zestrony = id;
  6.  
  7. });
[JAVASCRIPT] pobierz, plaintext


użyj:

[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. var zestrony = $("#container div:first-child").attr('id');
  3.  
[JAVASCRIPT] pobierz, plaintext
sliderr
30.07.2013, 06:59:46
Dzięki iProSoft za podpowiedź, pomogło smile.gif Popisałem jeszcze trochę kodu i więcej rzeczy działa. Aktualnie męczę się nad 2 problemami:

- Jak pętlą (w tym przypadku użyłem while) przejść po kolejnych div'ach i sprawdzać ich id oraz zliczać do zmiennej "inne", wszystkie divy o innych id aż do div'a o aktualnej dacie. Chodzi o to abym mógł później usunąć te elementy, które są przed aktualną datą i są już przestażałe.
- Jak wyjść z funkcji "moja_funkcja" po usunięciu div'a, tak aby całość kodu się ponownie wykonała, tj. znalazł nowy child_first czyli kolejnego div'a po tym usuniętym.

Aktualnie kod wygląda tak, dodałem parę alertów, żeby widzieć co się dzieje. 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.   <title> - jsFiddle demo</title>
  6.  
  7.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  8.  
  9. <script type='text/javascript'>
  10.  
  11. setInterval("moja_funkcja();",3000);
  12.  
  13. var zestrony;
  14. var aktualna;
  15. var minuty;
  16.  
  17. //<![CDATA[ 
  18. $(window).load(function(){ 
  19.  
  20. zestrony = $("#container div:first-child").attr('id');
  21.  
  22. });//]]>
  23.  
  24. function clock() {
  25.    var now = new Date();
  26.    var outStr = now.getDate()+'.'+ now.getUTCMonth()+'.'+ now.getFullYear()+'.'+ now.getHours()+':'+now.getMinutes();
  27.  aktualna = document.getElementById('clockDiv').innerHTML=outStr;
  28.    setTimeout('clock()',1000);
  29.  
  30. }
  31. clock();
  32.  
  33.  
  34. function moja_funkcja() {
  35.  
  36. 	/* petla do sprawdzania ile elementow jest przed aktualną data */
  37. 	var inne = 0;
  38. 	var i = 0;
  39. 	while (i < 6) {
  40.  
  41. 	if (zestrony != aktualna) {
  42. 		alert('inne');
  43. 		inne++;
  44. 	} else {
  45. 		alert('takie same!');
  46. 		break;
  47. 	}
  48.      	i++; 
  49. 	}
  50.  
  51. /*	for (var i = 0; i < inne; i++) {
  52.     $("#container div:first-child").remove();
  53. }*/
  54.  
  55.  
  56. 	if (zestrony == aktualna ) {
  57. 	alert('tak');
  58. 	$("#container div:first-child").remove();
  59. 	}
  60. 	else {
  61. 	alert(zestrony + ' ' + aktualna + ' nie'+' '+ inne);
  62. 	};
  63.  
  64. 	}
  65.  
  66. </script>
  67.  
  68.  
  69. </head>
  70. <body onload="clock();">
  71. <div id="clockDiv"></div>
  72. <div id="container">
  73.     <div id="30.6.2013.7:48">29.6.2013.23:44</div>
  74.     <div id="29.6.2013.21:46">29.6.2013.21:49</div>
  75.     <div id="29.6.2013.21:42">29.6.2013.21:49</div>
  76.     <div id="29.6.2013.23:57">29.6.2013.23:44</div>
  77.     <div id="30.6.2013.0:55">29.6.2013.23:44</div>
  78.     <div id="29.6.2013.23:59">29.6.2013.23:44</div>
  79.  
  80. </div>
  81.  
  82.  
  83. </body>
  84.  
  85.  
  86. </html>
  87.  
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.