javascript - 隐藏 Div 内的所有表格，但仅保留位于内部 Div 之前的一张表格

Question

我正在开发一个网络应用程序，并且我有几个表位于主 Div 内，ID = ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView。现在主 Div 有许多内部表和一个内部 Div。所以我需要执行以下操作:-

• 隐藏所有内部表格，除了 id = tl00_PlaceHolderLeftNavBar_ctl02_WebTreeViewn10Nodes 的内部 div 之前的表格。

这是使用 firefox bug 观察到的标记:-

现在我已经通过执行以下操作完成了我需要的操作:-

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table:not(:nth-child(11)) {
    display: none;
}

但这不是很优雅，因为如果我重新排序文件夹或添加新文件夹，我需要更改nth-child(11)。同时将其定义为隐藏除内部 div 之前的表格之外的所有表格更可靠......有人可以对此提出建议吗？我正在使用 jquery 1.10.2

Answer 1

var wrapper = $('#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView'),
    tables = wrapper.children('table');

tables.not(wrapper.children('div').prev()).hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView">
    <table><tr><td>hide</td></tr></table>
    <table><tr><td>hide</td></tr></table>
    <table><tr><td>hide</td></tr></table>
    <table><tr><td>hide</td></tr></table>
    <table><tr><td>show</td></tr></table>
    <div id="tl00_PlaceHolderLeftNavBar_ctl02_WebTreeViewn10Nodes"></div>
    <table><tr><td>hide</td></tr></table>
    <table><tr><td>hide</td></tr></table>
</div>

试试这个: