divsの特定のN番目の兄弟の子divsの位置を見つける方法

Question

私は新しい曜日のカレンダーを作成します。 IMAGE1のように、ダイナミックスパンが作成されたdivのいずれかをユーザーがクリックした場合、最大8時間までです。 つまり00:00のデザインを08:00までクリックした場合

だから私の質問はその特定の兄弟を8th divsの子供の位置にする方法です。

他の方法で教えてください。

$(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()を使用して次の要素を対象とします。

ここスニペットで私はあなたがあなたの質問内の一部のHTMLコードを追加する必要がデモ

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