Child selection using JQuery

Question

I have the following code

<div id="gridRow"></div>
   <div class="gridC-R45"><div><span>COLA</span></div></div>
   <div class="gridC-R45"><div><span>COLB</span></div></div>
   <div class="gridC-R45"><div><span>COLC</span></div></div>
   <div class="gridC-R45"><div><span>COLD</span></div></div>
</div>

This is the header section of a CSS3 table. I'm implementing a mouseover function which displays (ROW_TITLE, COL_TITLE).

I need, here, just a check on the code snippet that I'm using to get, for columnID=2, the title=COLB

var columnID = 2;
$colNameDiv = $("#gridRow div:nth-child(" + columnID + ") div span");
console.log($colNameDiv.text());

Where is the mistake?

Riccardo

Answer 1

You have a closing </div> tag immediately after opening the #gridRow div, which means the .gridX elements are not children of that div. If you remove the extra closing tag it works fine:

<div id="gridRow">
   <div class="gridC-R45"><div><span>COLA</span></div></div>
   <div class="gridC-R45"><div><span>COLB</span></div></div>
   <div class="gridC-R45"><div><span>COLC</span></div></div>
   <div class="gridC-R45"><div><span>COLD</span></div></div>
</div>

Example fiddle

Assuming you aren't already I would suggest using a text editor with syntax highlighting. It makes it 99.9% impossible to make mistakes like this.