2017-06-19 54 views
0

我创建新的小时日历。根据IMAGE1当用户点击任何一个div动态跨度创建长达8小时。 即如果点击00:00它的设计到08:00小时如何找到divs具体的第N个兄弟姐妹的子div位置

所以我的问题是如何得到具体的兄弟姐妹8th divs的孩子的位置。

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

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

IMAGE1 enter image description here

表设计规范时,阿贾克斯成功返回:

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

您必须添加你的问题里面的一些HTML代码,目前尚不清楚你想要什么,不能帮帮我。 – skobaljic

+0

好吧,先生,只需创建动态tbody,我可以分享代码@skbaljic –

+0

感谢您的指导@Satpal Sir –

回答

1

你可以得到想要的元素使用当前元素的.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>

+0

感谢您帮助我兄弟,但当我点击当时的第一位父母的孩子需要检查所有的条件,如流量。 孩子=>父母=>兄弟姐妹父母=>孩子 即,如果我点击00:45小时比8:45小时的孩子div在8小时父母分区 –

+0

+100谢谢@Satpal我做到了 –