Javascript nth-child不起作用

Question

我有一个由div组成的网格，每行具有以下结构

<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-grid-cells设为红色。 现在，您可以从html中看到，由于每个项目没有唯一的ID，因此没有正确的访问方式。 因此，我决定按ID来获取每一行，并使其第n个子项使该网格变为红色。 所以对于测试，当我从控制台执行以下代码时，它的工作正常

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

并且row0agent的第二个孩子变红了。

现在，当我遍历网格时，它的行为很奇怪

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

在上述情况下，$（“＃row” + i +“ agent”）工作正常，它选择了正确的行，但是nth-child（“ + 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

你的错误在这里

<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 2

我认为您应该使用此：

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

这意味着您将选择第三个标记中具有jqx-grid-cell类的标记，该标记中具有row0agent id

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. 查找标识为“ row0agent”的节点
2. 然后， 对于所有后代节点 （空间），不仅是直接子节点
3. 如果它是2次节点（仅具有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>