jQuery 选择器

Question

我有一个相当简单的动态 html 结构的表，其中包含链接，并且它可能包含第二个带链接的表。我想更改主表中链接的 html 属性，但不想更改第二个表中的链接。

我的结构：

<table>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr>
    <td>
        <table>
            <tr><td><a href="http://stackoverflow.com">link</a></td></tr>
            <tr><td><a href="http://stackoverflow.com">link</a></td></tr>
            <tr><td><a href="http://stackoverflow.com">link</a></td></tr>
        </table>
    </td>
</tr>

例如，我想将“www.google.com”的所有hrefs更改为“www.foo.com”。我可以更改 href 属性，但我的选择器有问题，因为有时第二个表不存在。

我当前的选择器如下所示： $('table a').filter(':not(table:last a)')

我确信这不是最有效的方法，但是它一直工作到没有第二张桌子发挥作用的可能性为止。

Answer 1

如果您的“主”表不在另一个表内，您可以执行以下操作：

$('table a:not(table table a)')

或等效：

$('table a').not('table table a')

更新：性能方面，帕特里克的答案要好得多。

Answer 2

我想我宁愿这样做：

$('table').slice( 0, -1 ).find( 'a' );

查找所有表，然后将集合减少到除最后一个之外的所有表，最后为 执行 .find()代码>元素。

原因是我严重偏向于有效的 CSS 选择器，以便 jQuery 可以成功利用 querySelectorAll。

Answer 3

您可以使用桌子的容器。
如果是本体：

$("正文>表格>tr>td>a")

Answer 4

尝试使用 子选择器 并为主表提供一个 ID（如果它没有 ID）已经) ：

$('#maintable > tbody > tr > td > a')

其中 #maintable 是主表的 ID。

编辑：您还需要将 标记添加到表格中（出于注释中指出的原因）。

这在较新的浏览器上使用基本的 CSS 选择器，并且不需要任何 jQuery 魔法，除非您使用的是较旧的浏览器。

Answer 5

如果您可以更改动态生成的 HTML，那么您确实应该为每个表提供一个 ID 属性：

<table id="table1"> ...
    <table id="table2"> ...
    </table>
</table>

那么您的选择器就可以很简单

$('#table1').find('a')

。这并不能真正回答您的问题，但这种设计更易于维护且更易于更改。