jquery - 如何在 html 表中选择第三个 tr 的 td？

Question

我有如下表格

 <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td>Name 1</td>
                        <td>Red</td>
                    </tr>
                    <tr>
                        <td>Name 2</td>
                        <td>Blue</td>
                    </tr>
                    <tr>
                        <td>Name 3</td>
                        <td>Green</td>
                    </tr>
                    <tr>
                        <td>Name 4</td>
                        <td>Yellow</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

我想选择“姓名 3”。这个怎么做？我试过了

$('table table tr td ') 

但它返回名称 1。可以说我没有给任何人 id。我知道我错过了一些非常愚蠢的东西!请帮助我。

Answer 1

jQuery

您想根据元素在父元素的子元素中的数量来选择元素。使用 CSS/jQuery API 的 :nth-child() 会很幸运。

$('table table tr:nth-child(3) td');

我认为这将是理想的!

还要注意，它是一个CSS元素选择器，jQuery使用所有的CSS选择器来选择元素。

更准确地说，你只得到第一个td，你可以使用这个代码:

$('table table tr:nth-child(3) td:first-child');

http://api.jquery.com/nth-child-selector/ (更多关于 child 选择的信息)

https://api.jquery.com/first-child-selector/ (有关第一个 child 选择的更多信息)

CSS

如果您在 CSS 中使用相同的代码，您将获得相同的输出。

为什么？因为您将在 jQuery 中使用的选择器在 CSS 中完全相同。您需要更改的只是实现元素属性的方式。

祝你好运!