的Javascript第n個孩子沒有工作

Question

我有一個由申報單的網格，每行有以下結構

<div role="row" style="position: relative; height:25px;" id="row0agent"> 
<div role="gridcell" style="left: 0px; z-index: 799; width:28px;" class="jqx-grid-cell jqx-item" title="Bansal, Sumeet"> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">Bansal, Sumeet</div> 
</div> 
</div> 
<div role="gridcell" style="left: 381px; z-index: 793; width:99px;" class="jqx-grid-cell jqx-item" title="0"> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">0</div> 
</div> 
<div role="gridcell" style="left: 480px; z-index: 792; width:42px;" class="jqx-grid-cell jqx-item" title="BTS"> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">BTS</div> 
</div> 
<div role="gridcell" style="left: 522px; z-index: 791; width:35px;" class="jqx-grid-cell jqx-item" title="BANSALS1"> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">BANSALS1</div> 
</div> 
<div role="gridcell" style="left: 557px; z-index: 790; width:56px;" class="jqx-grid-cell jqx-item" title="10013"> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">10013</div> 
</div> 
<div role="gridcell" style="left: 613px; z-index: 789; width:49px;" class="jqx-grid-cell jqx-item" title="Amit Saha"> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">Amit Saha</div> 
</div> 
<div role="gridcell" style="left: 662px; z-index: 788; width:28px;" class="jqx-grid-cell jqx-item" title="HQ"> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">HQ</div> 
</div> 
<div role="gridcell" style="left: 690px; z-index: 787; width:63px;" class="jqx-grid-cell jqx-item" title="Kausik "> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">Kausik </div> 
</div> 
<div role="gridcell" style="left: 753px; z-index: 786; width:63px;" class="jqx-grid-cell jqx-item" title="UNASSIGNED"> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">UNASSIGNED</div> 
</div> 

我必須作出一些JQX-網格單元的紅色作爲根據業務邏輯。現在，您可以從html中看到，沒有正確的方式訪問每個項目，因爲它們沒有唯一的ID。 所以我決定通過id獲得每一行，並得到它的第n個孩子，使該網格爲紅色。 所以對於測試當我執行下面的代碼從控制檯其做工精細

$("#row0agent :nth-child(2)").css("color","red"); 

和row0agent的第二個孩子是越來越紅。

現在，當我循環通過網格其行爲怪異

$("#row"+i+"agent :nth-child("+j+")").css("color","red"); 

在上述情況下$（「＃排」 + I +「代理」）正常工作是選擇合適的行，但第n個孩子（「+ j +」）給出了錯誤的選擇。

而是選擇

<div role="gridcell" style="left: 28px; z-index: 798; width:35px;" class="jqx-grid-cell jqx-item" title="Available"> 
<div class="jqx-grid-cell-left-align" style="margin-top: 4px;">Available</div> 

這是選擇整行。

由於i和j是整數我也使用toString()以及但它沒有奏效。

Answer 1

我認爲你應該使用這樣的：

$("#row0agent .jqx-grid-cell:eq(2)").css("color","red"); 

它的意思，你會選擇第三個標籤已在標籤JQX-網格單元中的類有row0agent ID

Answer 2

你的錯誤是在這裏

<div role="row" style="position: relative; height:25px;" id="row0agent"> 
<div role="gridcell" style="left: 0px; z-index: 799; width:28px;" class="jqx-grid-cell jqx-item" title="Bansal, Sumeet"> 
    <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">Bansal, Sumeet</div> 
</div> 
</div> 

這裏你結束了主DIV。所以你的代碼不工作。因爲，編譯器明白，id row0agent中只有1個div。所以，它不能讀第二個孩子。

工作代碼

$("#row0agent :nth-child(2)").css("color","red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div role="row" style="position: relative; height:25px;" id="row0agent"> 
 
    <div role="gridcell" style="left: 0px; z-index: 799; width:28px;" class="jqx-grid-cell jqx-item" title="Bansal, Sumeet"> 
 
     <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">Bansal,Sumeet</div> 
 
    </div> 
 
    <div role="gridcell" style="left: 381px; z-index: 793; width:99px;" class="jqx-grid-cell jqx-item" title="0"> 
 
     <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">0</div> 
 
    </div> 
 
    <div role="gridcell" style="left: 480px; z-index: 792; width:42px;" class="jqx-grid-cell jqx-item" title="BTS"> 
 
     <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">BTS</div> 
 
    </div> 
 
    <div role="gridcell" style="left: 522px; z-index: 791; width:35px;" class="jqx-grid-cell jqx-item" title="BANSALS1"> 
 
     <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">BANSALS1</div> 
 
    </div> 
 
    <div role="gridcell" style="left: 557px; z-index: 790; width:56px;" class="jqx-grid-cell jqx-item" title="10013"> 
 
     <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">10013</div> 
 
    </div> 
 
    <div role="gridcell" style="left: 613px; z-index: 789; width:49px;" class="jqx-grid-cell jqx-item" title="Amit Saha"> 
 
     <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">Amit Saha</div> 
 
    </div> 
 
    <div role="gridcell" style="left: 662px; z-index: 788; width:28px;" class="jqx-grid-cell jqx-item" title="HQ"> 
 
     <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">HQ</div> 
 
    </div> 
 
    <div role="gridcell" style="left: 690px; z-index: 787; width:63px;" class="jqx-grid-cell jqx-item" title="Kausik "> 
 
     <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">Kausik </div> 
 
    </div> 
 
    <div role="gridcell" style="left: 753px; z-index: 786; width:63px;" class="jqx-grid-cell jqx-item" title="UNASSIGNED"> 
 
     <div class="jqx-grid-cell-left-align" style="margin-top: 4px;">UNASSIGNED</div> 
 
    </div> 
 
</div>

Answer 3

它可以是這樣：

$(document).ready(function(){ 
    var i =0; 
    for(j=2;j<10;j+=3) 
     $("#row"+i+"agent .jqx-grid-cell").eq(j).css("background-color","red"); 

}); 

工作小提琴：https://jsfiddle.net/kodedsoft/kuuswn0a/

Answer 4

請注意，因爲你有一個空間在裏面，#row0agent :nth-child(2)是說

1. 查找與ID 「row0agent」
2. 然後爲該節點的所有後代節點（空間），而不僅僅是眼前的孩子
3. 如果是2 ND點（只有1個兄弟姐妹）
4. 選擇此節點

因此，如果您要使用:nth-child(1)，則會看到「整行」被選中，因爲您顯示的每個.jqx-grid-cell-left-align都是第一個孩子。我猜這就是你看到的意外行爲的情況下 - 你實際上並沒有給i和j值

---

相反，嘗試與孩子特定的選擇>; #row0agent > :nth-child(2)，或在您的一般情況下，

$("#row" + i + "agent > :nth-child(" + j + ")").css("color", "red"); 

---

這也可能是視覺上更容易看到，如果你使用邊界不是文本顏色的哪個節點已被選定

var i = 0, 
 
    j = 1; // !important to prove it is not matching other nodes too 
 
$("#row" + i + "agent > :nth-child(" + j + ")").css("border", "2px solid red", "!important"); 
 
j = 2; 
 
$("#row" + i + "agent > :nth-child(" + j + ")").css("border", "2px solid green"); 
 
j = 3; 
 
$("#row" + i + "agent > :nth-child(" + j + ")").css("border", "2px solid blue"); 
 
j = 4; 
 
$("#row" + i + "agent > :nth-child(" + j + ")").css("border", "2px solid yellow");

#row0agent > div { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="row0agent"> 
 
    <div> 
 
    <div>1</div> 
 
    </div> 
 
    <div> 
 
    <div>2</div> 
 
    </div> 
 
    <div> 
 
    <div>3</div> 
 
    </div> 
 
    <div> 
 
    <div>4</div> 
 
    </div> 
 
</div>