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-cell设置为红色。现在你可以从html看到没有正确的方法来访问每个项目，因为他们没有唯一的ID。 所以我决定按ID获取每一行，并让第n个孩子将该网格设为红色。 因此，当我从控制台执行下面的代码工作正常时进行测试

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

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

现在，当我在网格中循环时，它表现得很奇怪

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

在上面的情况下，$（＆＃34;＃row＆＃34; + i +＆＃34; agent＆＃34;）工作正常，它正在选择正确的行但是nth-child（＆＃34; + j + ＆＃34;）提供了错误的选择。

而不是选择

<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

可以这样：

{{1}}

工作小提琴：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>