Question

I have this HTML table:

<table id="languages" border="0" cellspacing="1">
  <thead>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Invented</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Java</td>
      <td>Static</td>
      <td>1995</td>
    </tr>
    <tr>
      <td>Ruby</td>
      <td>Dynamic</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>Smalltalk</td>
      <td>Dynamic</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>Static</td>
      <td>1983</td>
    </tr>
  </tbody>
</table>

When I run this JavaScript:

alert($('td').index($('td:contains(C++)')))

I get a pop up saying 9, which is what I would expect.

And when I run this: alert($('td:eq(9)').text()), the pop up says C++, again same as what one would expect. But if I try to put the first function/selection instead of hard coding 9 in the second selector, like this…

alert($('td:eq($('td').index($('td:contains(C++)')))').text())
// just replacing the hard coded 9 with the first selector, as it gives a value of 9

…nothing happens. I don’t get any pop up saying C++, which is what one would expect, I don’t get any pop up for that matter. Can anyone please tell me what am I doing wrong?

Answer 1

The problem is that you aren’t escaping the single quotes in the inner selector, so you’re effectively exiting the string at that point, which is throwing an error. Change this:

alert($('td:eq($('td').index($('td:contains(C++)')))').text())

To this:

alert($('td:eq(' + $('td').index($('td:contains(C++)')) + ')').text())