I have designed a new calendar interface with dynamic functionality. When the user clicks on any time slot displayed in IMAGE1, a span element is created dynamically to represent 8 hours starting from that clicked time.
My question is, how can I access the position of the 8th sibling div associated with the clicked time slot?
If there are alternative methods or suggestions, please feel free to advise.
$(this).nextAll().eq(7).attr("id");
IMAGE1 https://i.stack.imgur.com/KYiRE.png
The table design code below is generated when the Ajax function returns successfully:
$(r.emp_nm).each(function (index) {
tabelBody += "<tr><td style='width:10%'><div class='col-xs-3 col-md-3 on-break-tab'>" + this.fname.charAt(0) + this.lname.charAt(0) + "</div>" + this.fname + ' ' + this.lname + " </td>";
for (var i = 0; i < 24; i++) {
var tabelsubBody = "";
var p = 15;
var t_id = r.hours[i];
for (var j = 0; j < 4; j++) {
tabelsubBody += "<div style='float:left; width:25%;height:inherit;' class='Dropablesub_td' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "_" + j + "'></div>";
}
if (i === 23) {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td></tr>";
} else {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td>";
}
}
});
$("#tabelBody").html(tabelBody);
$("#tdDate").html(r.today);
$("#SelectDate").val(r.today);
$("#currentSelect").val("Days");
Events();
Here's the function for the event handling:
function Events() {
$("body").on("click", ".Dropablesub_td", function () {
var hidid = $(this).attr("id");
var Myleft = $(this).position().left;
var Mytop = $(this).position().top;
alert($(this).nextAll().eq(7).attr("id"));
$(this).append("<span id='" + hidid + "' class='divId label label-success ui-widget-content filediv unselectable' >ABCDEFGHIJKLMNOPQRSTUVWXYZ<span>");
$(this).children(
).css({zIndex: 999, position: "absolute", top: Mytop, left: Myleft, width: '40%', display: "block", border: "#808080 solid 2px", color: "black", background: "#00CEB4"});
});
}