仅检测viewport jQuery中的元素

时间:2012-12-20 19:19:15

标签: javascript jquery iphone ipad viewport

我有以下内容:

    <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行,渲染速度很慢。我想只影响视口中的元素(+ - 几个),并且当用户向下滚动时更改其他元素而不是一次更改所有元素。

1 个答案:

答案 0 :(得分:1)

假设您要隐藏特定列。在创建表时,将一个类附加到该列的每个td(假设类称为specialTD)。

像这样在你的CSS中输入:

  

table.hideCol .specialTD {display:none; }

现在,无论何时需要隐藏/显示列,只需在表格中添加/删除该类。


在旁注中,您的孩子选择器对我来说似乎不正确。

  

-n + 1只表示第一个td    n + 2表示从第二个开始每个td。

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