javascript - 如何找到divs子div位置的第N个同级兄弟

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

所以我的问题是如何获得同级兄弟8 divs的孩子位置。

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

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

影像1


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

而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"});
    });
}

最佳答案

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

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

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

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

关于javascript - 如何找到divs子div位置的第N个同级兄弟，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44629866/