jquery - 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并全部淡化”

好的，也许答案是因为它内部没有值，而其他 3td's有。

所以我测试了（在第二张桌子上）：

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

它确实使所有TR 褪色（尽管最后一个单元格是空的）....

这里发生了什么？

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

Answer 1

问题出在第一个例子上。根据 API ( http://api.jquery.com/parent-selector/ )，:parent选择其中包含内容的内容。所以第一个选择器是说“获取所有<td>包含内容的s”，所以它只选择前三个<td>s。要选择 s 的所有父母<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);