Hinzufügen eines divs nur für ein Element

  • Hallo,
    ich sitze gerade an einer Funktion, die einen roten Punkt hinzufügen soll, wenn die entsprechende if-Abfrage korrekt ist.
    Ich steh gerade auf dem Schlauch, wie ich das anstellen soll....


    Ich vergleiche die Einträge aus der Datenbank (Tag, Monat, Jahr) mit dem Kalender (auch hier Tag, Monat und Jahr), den ich implementiert habe.
    Die Abfrage stimmt, jetzt soll aber an dem Tag, an dem die Übereinstimmung true ist, ein roter Punkt als div hinzugefügt werden.


    dayOfCalender ist bei mir 10. Nun haben aber wieder alle den gleichen Klassennamen.
    Frage: Wie kann ich diesen roten Punkt mit der append()-Funktion genau nur auf das td legen, wo der Tag der DB und der Tag des Kalenders übereinstimmen?


    JavaScript
    function addEntrySuccess(transaction, data) {    $(data).each(function () {        for (var i = 0; i < data.rows.length; i++) {            var month = new Array();            month[0] = "Januar";            month[1] = "Februar";            month[2] = "März";            month[3] = "April";            month[4] = "Mai";            month[5] = "Juni";            month[6] = "Juli";            month[7] = "August";            month[8] = "September";            month[9] = "Oktober";            month[10] = "November";            month[11] = "Dezember";            var dayDB = data.rows.item(i).dateday;            var monthDB = data.rows.item(i).datemonth;            var yearDB = data.rows.item(i).dateyear;            var dayOfCalendar = $(".daily-view").map(function () {                return $(this).text();            });            var monthOfCalendar = $(".calendar--month-year").text().split(" ")[0];            var yearOfCalendar = $(".calendar--month-year").text().split(" ")[1];            for (var i = 0; i < 31; i++) {                console.log (                    dayDB + " == " + dayOfCalendar[i] + " && " +                    monthAsText(monthDB - 1) + " == " + monthOfCalendar +                    " && " + yearDB + " == " + yearOfCalendar                );                if (dayDB == dayOfCalendar[i] && monthAsText(monthDB - 1) == monthOfCalendar && yearDB == yearOfCalendar) {                    console.log(dayOfCalendar[i]); $("day").append("<div class='circle'></div>");                }            }        }    });}function monthAsText(number) {    return month[number];}
  • Ich bin mir ziemlich sicher, das das kein größeres problem ist, aber leider ist dein Quellcode (wie auch schon in anderen deiner Beiträge) so unmöglich formatiert, das ich mir das so nicht angucken will...


    Da muss man ja vorher ne halbe Stunde investieren nur um den Code zu formatieren...

  • Schöner Code, super ^^


    Wie sieht (ein Ausschnitt reicht) der Code deines Kalenders aus? Das wäre hilfreich um zu verstehen was genau diene Funktion tut, momentan blicke ich da nämlich nicht vollständig durch ^^'

  • Das gibt es echt nicht... :cursing: Hab versucht das zu formatieren, aber es will mich ärgern...

    JavaScript
    function calendar(weekDayNumber, days){ 	var d = new Date();	var currentDay = d.getDate(); 	var table = $('<table class="column small-12 calendar--table"></table>'); 	var tr = $('<tr class="bg-skyeblue"></tr>');
       //row for the day letters 	for(var column = 0; column <= 6; column++){ 		var th = $('<th></th>'); 		th.html("MDMDFSS"[column]); 		tr.append(th); 	}
    	table.append(tr);
     //create 2nd row 	tr = $('<tr></tr>'); 	var column; 	for(column = 0; column <= 6; column++){
    		if(column == weekDayNumber){ 			break; 		} 	var td = $('<td></td>');	td.html(" ");  tr.append(td); }
    	var counter = 1; 	for(; column <= 6; column++){		var td = $('<td></td>'); 		td.html(counter); 		 counter++; 		if(td != " "){ 			$(td.addClass("daily-view")); 		}
    		if(td.html() == currentDay){			td.addClass("current--day"); 		} 		tr.append(td); 	}
    		table.append(tr);
       //rest of the date rows 	for(var row = 3; row <= 7; row++){ 		tr = $('<tr></tr>'); 		for(var column = 0; column <= 6; column++){ 			if(counter > days){ 				table.append(tr);
    				return table; 			} 			var td = $('<td></td>'); 			td.html(counter); 			counter++; 			 if(td != " "){ 				 $(td.addClass("daily-view")); 			 } 			 if(td.html() == currentDay){ 				 td.addClass("current--day"); 			 }			 tr.append(td); 		}		 table.append(tr); 	}  return table;}
  • Sarah1991
    Bitte stell mal deine Line-Endings im Editor auf Windows (CR LF) oder Unix LF um! https://de.wikipedia.org/wiki/Zeilenumbruch#ASCII
    Dann sollte das kein Problem mehr darstellen..


    Du kannst dir viel schreiben sparen..:


    Und versuche so viel wie möglich aus den schleifen (each und for) raus zu hauen und vorher einfach in eine variable zu speichern (z.b. musst du nicht jedes mal den text erneut auslesen, da es eh immer der gleiche ist, du musst dir auch nicht 1000 mal die monate neu in ne variable speichern, mach das alles vorher!
    Und wenn du in eienr funct eine var definierst wirst du sie meistens in der anderen funkt nicht gebrauchen können!


    Bei dir stimmt in Zeile 37 bzw eig. 38 der selektor $("day") nicht .. will das element mit dem tag-namen 'day' auswählen.. müsste $(this) sein denke ich


  • Danke für deine Mühe!


    Mal sehen, ob es klappt... Hab es auf Unix umgestellt....


    day war noch von meinen Versuchen drin... Aber mit this geht es leider nicht. Da hat jquery nen problem. das this bezieht sich ja auf das data dann in der each-loop. (Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined)


    Ich brauche ja quasi das div aus dem kalender:


    HTML
    <tr><td class="daily-view">10</td>...</tr>

    , in dem alle divs daily--view heißen. ->

    JavaScript
    $(dayOfCalendar[day_key]).append("<div class='circle'></div>");


    Aber das klappt irgendwie nicht...


    Hab gerade mal getestet, ob es ordentlich formatiert ist, aber das will auch nicht - nach der Usmtellung -.-


    wolf: Die beiden Funktionen sind in zwei verschiedenen js-Dateien.

  • Jo, lass die zweite Funktion trotzdem so.. (auch wenn du sie in die andere Datei packst)


    Kannst du jedem DAY-Div das Attribut data-day geben?
    Dann könntest du sowas machen:

    JavaScript
    $('.daily-view[data-day="'+ day_key++ +'"]')

    oder was du halt brauchst

  • Oh na klar..... Oh man Danke. Hat geklappt...
    OKay, aaaaaaber.... wenn ich jeztzt den Tag 2 habe dann setzt er mir ja überall, wo er eine 2 findet den Punkt. Das ist ja dann nicht ganz korrekt


    Ich habe es nun mit dem Attribut gemacht und das klappt perfekt. :thumbup:


    Ich habe da noch ein paar kleinere Fragen, bevor ich die Tagesansicht eines Kalenders starte...


    und zwar habe ich inputfelder mit dem type number erstellt:

    HTML
    <input class="item__field--date month newMeeting is-required" min="01" max="12" step="1" type="number" />


    Wenn ich jetzt über die Pfiele hoch klicke, habe ich von 1 bis 9 nicht 01, 02, ... stehen, sondern eben nur 1, 2, ....
    Kann ich das mit 0 auffüllen?


    Wäre ja bei einer Uhrzeit von 23:1 irgendwie doof... heißt ja 23:01

  • Ja, das mit dem contains stimmt wohl, aber das würde sich sicher auch lösen lassen, aber die "data" Lösung gefällt mir eigentlich auch besser ^^


    Könntest über eine onchange-event einfach prüfen ob 1 oder 2 stellig und dann halt entsprechend ne 0 auffüllen, aber ich bin mir nciht sicher, ob das optisch so geht... (Wäre ja doof, wenn immer erst 2 aufflackert und dann 02 draus wird) aber das müsste man vlt einfach testen...

  • Alles klar, danke. Das versuch ich morgen mal. Ist eigentlich auch eher eine Stylesache, die jetzt keinen Vorrang hat (geht um meine BA). Muss mit der Funktionalität fertig werden..
    Da fehlt jetzt "NUR" noch die tagsansicht... :pinch:


    Naja, dann sieht es aber meinem Enrwurf gar nicht mehr ähnlich^^

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!