I'm having a problem selecting an element in jQuery

Question

Hi, I'm using selectorgadget to help me select elements on the document. But when I used it on jQuery it doesn't work. The nth-child selector seems not to work for me.

<div id = "wrap">
<div class = "book">
    <div class = "chapter">
     <p class = "text">
      <table>
       <tbody>
        <tr>
         <td>Title</td>
         <td>
          <b>jQuery</b>
         </td>
        </tr>
       </tbody>
      </table>
     <p>
    </div>
</div>
</div>

The HTML is above. There are many book class. The div wrap is the wrapper that enclosed them all. Selector Gadget said that when I use:

$("#wrap tr:nth-child(1) b") It should select the TD element with the <b> tag in it. So it should select "jQuery".

I tried it, but it didn't work. When I tried:

var query = $("#wrap tr:nth-child(1) b").text();
alert(query);

The browser sends an alert with no text. And when I tried:

var query = $("#wrap tr:nth-child(1) b").html();
alert(query);

The browser sends a NULL alert.

What's wrong?

Answer 1

have you tried

modified, i first didnt notice the tr:nth-child, there is no 1 child tr in that table, but there is a td at index 1

var query = $(".text td:nth-child(1) b").html();
alert(query);

Answer 2

In testing your sample in Firefox 3 and IE8, I was able to get back the text you expected using your selector after one tweak - I added an ID of "wrap" to your table element:

<table id="wrap">

Once that was added in, your selector seemed to work just fine. Is there a particular platform you are having trouble with?

Answer 3

I just tried your example code and it worked straight away. What version of jQuery are you using? It works in 1.3.2

Here's the working example: http://jsbin.com/uzuzu/edit

Answer 4

I've tried this with FF 3.0.10, jQuery 1.3.2, greasemonkey 0.8.2

var query = $("#wrap tr:nth-child(2) b").text();
returns "jQuery"

the 2 in nth-child() does the trick!! Index for nth-child starts from 1 not 0

Answer 5

You need nth-child(2), :nth-child(1) picks out title. Remember that :eq is 0-based, while :nth-child() is 1-based. Confusing!