Autor | Zpráva | ||
---|---|---|---|
vodys Profil |
#1 · Zasláno: 17. 2. 2021, 10:17:53
Dobrý den,
zajímá mě, zda-li se dá nějakým způsobem označit a stylovat následující span. Příklad: <td><span class="day event">24</span></td> <td><span class="day">25</span></td> Potřebuji vždy stylovat první span.day, který následuje po span.day.event V některých případech pak může být i takhle: <tr><td><span class="day event">24</span></td></tr> <tr><td><span class="day">25</span></td></tr> Existuje prosím nějaké univerzální řešení? Díky! |
||
Radek9 Profil |
vodys:
Leda přes :has , podpora ale prakticky neexistuje. Šlo by tu třídu dát tomu <td> ? Pak by to mohlo vypadat takhle:
<td class="event"><span class="day">24</span></td> <td><span class="day">25</span></td> td.event + td span.day { color: red; } U těch případů s <tr> je to stejný problém. Prostě nedáš dohromady selektor, který uvažuje nadřazené elementy. Možná zkusit něco jiného než tabulku, třeba flexbox nebo grid.
|
||
vodys Profil |
#3 · Zasláno: 17. 2. 2021, 12:15:08
Radek9:
Díky za radu. Jediné, čím je v mých silách modifikovat js je pojmenovat každou td na stejnou třídu. Tedy: <td class="test"><span class="day event">24</span></td> <td class="test"><span class="day">25</span></td> |
||
Radek9 Profil |
vodys:
Ta tabulka je tedy předgenerovaná a sahat se do ní nedá? Dalo by se to totiž třeba už při generování (např. v PHP) řešit přidáním třídy do následující buňky. Jinak se to samozřejmě dá řešit přes JS, ne každý ho ale musí mít zaplý. var days = document.querySelectorAll('table span.day') for (let i = 0; i < days.length - 1; ++i) { if (days[i].classList.contains('event')) { days[i + 1].classList.add('after-event') } } |
||
vodys Profil |
Tak tu funkci v js jsem našel..
for (var day = firstDay; day <= lastDay; day.setDate(day.getDate())) { var tr = $('<tr></tr>'); //For each row for (var i = 0; i < 7; i++) { // var td = $('<td><span class="day">' + day.getDate() + '<span class="room-price">12$</span>' + '</span></td>'); var td = $('<td><span class="day">' + day.getDate() + '</span></td>'); //if today is this day var ymd = day.getFullYear() + '-' + day.getMonth() + '-' + day.getDay(); var ymd = this.formatToYYYYMMDD(day); // console.log(ymd); if ($.inArray(this.formatToYYYYMMDD(day), plugin.events) !== -1) { // console.log('found'); td.find(".day").addClass("event"); // tr.find(".test").addClass("event"); } //if day is previous day if (day < (new Date())) { td.find(".day").addClass("wrong-day"); } if (day.toDateString() === (new Date).toDateString()) { td.find(".day").addClass("today"); td.find(".day").removeClass("wrong-day"); } //if day is not in this month if (day.getMonth() != fromDate.getMonth()) { td.find(".day").addClass("wrong-month"); } Bohužel v js jsem jelito a tu podmínku tam zadat neumím :/ |
||
Radek9 Profil |
vodys:
Mělo by stačit si na začátku před vnějším cyklem definovat nějaký flag: var afterEvent = false; for (var day = firstDay; day <= lastDay; day.setDate(day.getDate())) { ... A potom postupovat obdobně jako při přidávání té třídy event: if (afterEvent) { td.find(".day").addClass("after-event"); afterEvent = false; } if ($.inArray(this.formatToYYYYMMDD(day), plugin.events) !== -1) { td.find(".day").addClass("event"); afterEvent = true; } |
||
Časová prodleva: 4 roky
|
0