Question

I have 2 tables.

 <table border="1" class="a">
            <tr>
                <td>Value 1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Value 2</td>
                <td></td>
            </tr>
        </table>




        <table border="1"  class="b">
            <tr>
                <td>Value 1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Value 2</td>
                <td></td>
            </tr>
        </table>

On table #1 I write :

  $(".a td:parent").fadeTo(1500, 0.3);

and the result is :

Notice the green one which wasn’t faded out .

But it doesn’t make sence. I wrote “go to parent – which is the TR and fade it all”

Ok maybe the answer is that because it doesn’t have a value inside while the other 3 td's has.

So I tested (on the second table):

$(".b tr").fadeTo(1500, 0.3);

and it did faded the All TR’s (although the last cell is empty)….

What is going on here?

jsbin : http://jsbin.com/ehacen/1/edit

Answer 1

The problem is with the first example. According to the API ( http://api.jquery.com/parent-selector/), :parent selects that have content inside them. So the first selector is saying “get all <td>s that have content in them”, so it only selects the first three <td>s. To select all the parents of the <td>s, use this:

$('.a td').parent()

Hope this clears it up for you!