CODEWITHSUNDEEP
jqueryselectchildren
Riccardo79
Riccardo79

Reputation: 1046

Child selection using JQuery

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

Upvotes: 1

Views: 52

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 4

Related Questions