使用 jQuery 在 iframe 中加载页面后将 CSS 类添加到表行？

Question

我正在 iframe（带有 Facebox）中加载表单。当提交表单并重新加载 iframe 内的页面时，我想将 CSS 类添加到父页面上的特定表格行。

表格如下所示：

<table>
    <tr id="row-1"><td><a href="">link to open facebox with iframe</a></td></tr>
    <tr id="row-2"><td></td></tr>
    <tr id="row-3"><td></td></tr>
    <tr id="row-4"><td></td></tr>
</table>

在 iframe 中提交表单后，父框架中的表格应如下所示：

<table>
    <tr id="row-1" **class="highlite"**>
        <td><a href="">link to open facebox with iframe</a></td>
    </tr>
    <tr id="row-2"><td></td></tr>
    <tr id="row-3"><td></td></tr>
    <tr id="row-4"><td></td></tr>
</table>

社区可以帮助我正确实现此操作吗？

Answer 1

$("#row-1", window.parent.document).toggleClass("highlite");

引用Pim Jager :

$() 包装器的第二个参数是要搜索的上下文。默认为文档。

Answer 2

如果有可能单击并再次加载相同的链接，您可能需要使用 .addClass 而不是 .toggleClass。 .toggleClass 的默认行为是检查该元素上的类是否存在，然后根据结果添加或删除它。

如果您的目的是仅突出显示当前行，您将需要执行以下操作：

$("#row-1", window.parent.document).addClass("highlite")
    .siblings().removeClass("highlite");