Avoid selecting nested td's. How?

Question

I have this code:

$("#widgetstable tr td:nth-child("+column+")").hide();

But it selects any td's that happen to be nested inside the selected td's. (And there are a couple.)

I tried $("#widgetstable > tr > td:nth-child("+column+")").hide(); but it didn't select ANYTHING.

Can you post the HTML you want to apply this to? A jsFiddle would be nice too. — j08691, Jan 04 '13 at 21:30
@Beetroot-Beetroot - I know, I already did the +1 math on that. — Matthew Davis, Jan 04 '13 at 21:46
@j08691 - Waaaaaay too long and convoluted to try and post here. — Matthew Davis, Jan 04 '13 at 21:47
Then you should narrow the code down to a small example that represents your issue. — j08691, Jan 04 '13 at 21:48

score 4 · Accepted Answer · edited May 23 '17 at 10:24

4

A tbody is inserted silently when your browser parses your HTML, and the > selector means the direct child of the parent. For the following HTML this selector would work:

<style>
   td {
     background-color: blue;
   }
</style>
<table id='widgetstable'>
  <tr>
    <td>Me</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr><td>Not Me</td></tr>
      </table>
    </td>
  </tr>
</table>
<script>
  $("#widgetstable > tbody > tr > td").css('background-color', 'red');
</script>

Here is a demo

edited May 23 '17 at 10:24

Community

1
1

answered Jan 04 '13 at 21:29

Jason Sperske

29,816
8
73
124

Not sure how to mark this as having answered my question... but it did. – Matthew Davis Jan 04 '13 at 21:44
To be safe, I think it would be a good idea to include an explicit `` in the HTML. You could also give it an id and simplify the selector to `$("#tbodyId").children("tr").children("td")`. – Beetroot-Beetroot Jan 04 '13 at 22:36

Avoid selecting nested td's. How?

1 Answers1