Question

我创建新的小时日历。根据 IMAGE1 ，当用户点击动态跨度最多创建8小时的任何div时。即如果点击00:00设计到08:00时

所以我的问题是如何让特定的兄弟姐妹获得第8个孩子的位置。

或者其他任何方式请建议我。

$(this).eq(+8).attr("id");

IMAGE1

ajax返回成功时的表设计代码：

$(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();

事件（）是：

 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).eq(+8).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"});
    });
}

Answer 1

您可以使用当前元素的.index()获取所需元素，然后使用.eq()定位下一个元素。

在我的代码片段中，我创建了一个用于演示的伪代码

＆＃13;

$(document).on("click", ".dropabletd", function() {
  var tr = $(this).closest('tr');
  var tds = tr.find('td');
  var index = tds.index(this);
  var sibling = tds.eq(index + 8);
  console.log($(this).attr('id'), sibling.attr('id'));
});

createTable();

function createTable() {
  var tabelBody = ""
  for (var i = 0; i <= 23; i++) {
    tabelBody += "<td class='dropabletd' id='id" + i + "'>" + i + "</td>";
  }
  $("table tr").html(tabelBody);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr></tr>
</table>

＆＃13;

如何找到div特定的第n个兄弟姐妹的位置

1 个答案: