仅检测视口jQuery中的元素

Question

我有以下内容：

    <div id="btnL">Left</div>
    <div id="btnR">Right</div>

    <table id="tab1">
            <thead>
                    <tr>
                            <td>Item</td>
                            <td>Price</td>
                            <td>Descript</td>
                    </tr>
            </thead>
            <tbody>
                    <tr>
                            <td>Entry</td>
                            <td>Entry</td>
                            <td>Entry</td>
                    </tr>
                    <tr>
                            <td>Entry</td>
                            <td>Entry</td>
                            <td>Entry</td>
                    </tr>
                    .
                    .
                    .
                    <tr>
                            <td>Entry</td>
                            <td>Entry</td>
                            <td>Entry</td>
                    </tr>

            </tbody>
    </table>

    <script>
            $("#btnR").click(function(e) {
                    $("#tab1 thead tr td:nth-child(n+2).css("display","table-cell");
                    $("#tab1 thead tr td:nth-child(-n+1).css("display","none");
            });
            $("#btnL").click(function(e) {
                    $("#tab1 thead tr td:nth-child(n+2).css("display","none");
                    $("#tab1 thead tr td:nth-child(-n+1).css("display","table-cell");
            });
    </script>

该代码按预期工作，隐藏并显示最后一个元素。 问题是表中有20,000行，渲染速度很慢。 我只想影响视口中的元素（+-几个），并且随着用户向下滚动而更改其他元素，而不是一次全部更改它们。

Answer 1

假设您要隐藏特定的列。 在创建表的过程中，向该列的每个td附加一个类（假设类称为specialTD ）。

像这样在您的css中输入：

table.hideCol .specialTD {显示：无； }

现在，每当您需要隐藏/显示列时，只需在表上添加/删除类即可。

---

附带一提，您的孩子选择器对我来说似乎不正确。

-n + 1仅表示第一个td。
n + 2表示每秒钟从秒开始。

请参阅http://css-tricks.com/how-nth-child-works/