jQuery选择器问题？

Question

我有2张桌子。

 <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>

在表＃1上我写道：

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

结果是：

注意不的绿色淡出。

但它没有成功。我写了“转到父母 - 这是 TR 并将其全部淡化”

好吧也许答案是，因为它内部没有值，而另外3 td's有。

所以我测试了（在第二个表上）：

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

它确实淡化了 All TR（虽然最后一个单元格是空的）....

这里发生了什么？

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

Answer 1

问题在于第一个例子。根据API（http://api.jquery.com/parent-selector/），:parent选择其中包含内容的内容。所以第一个选择器说“获取其中包含内容的所有<td>”，因此它只选择前三个<td>。要选择<td>的所有父母，请使用：

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

希望这能为你解决这个问题！

Answer 2

选择器:parent将查看带有子项的td（在此示例中，您的所有三个td都有一个textNode作为子项，而不是最后一个。:parent没有上升到dom树您将需要使用：

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

或者如果你想使用：parent：

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

我认为你需要等到CSS4带有他们的父选择器http://www.w3.org/TR/2011/WD-selectors4-20110929/

Answer 3

如果要构建更复杂的选择器，则可以使用:has()选择器：

http://api.jquery.com/has-selector/

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