Javascript nth-child not working
<p>I have a grid which is made up of divs and each row has following structure</p>

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

<p></p>

<p>I have to make some of the jqx-grid-cells red as per the business logic. Now as you can see from html there is no proper way of accessing each item as they don't have unique id.
So I decided to get each row by id and get its nth child to make that grid as red. 
So for testing when I execute below code from console its working fine</p>

<pre><code>$("#row0agent :nth-child(2)").css("color","red");
</code></pre>

<p>and the 2nd child of row0agent is getting red.</p>

<p>Now when I am looping through the grid its behaving strange</p>

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

<p>In the above case $("#row"+i+"agent") is working properly it is selecting proper row but nth-child("+j+") is giving wrong selection.</p>

<p>Instead of selecting </p>

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

<p></p>

<p>It is selecting entire row. </p>

<p>Since <code>i</code> and <code>j</code> are integer I used <code>toString()</code> as well but it didn't work. </p>