Question

HTML：

<table id="collapse">
    <tbody>
        <tr>
            <th>Heading</th>
        </tr>
        <tr>
            <td>Text</td>
        </tr>
        <tr>
            <td>Text</td>
        </tr>
     </tbody>
</table>

的Javascript / JQuery的：

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#collapse');
    });
</script>

CSS：

<style type="text/css">
    #collapse tr{display:none;}
    #collapse tr:first-child{display:table-row;}

    /* or is there a prettier, better way to do this? */
</style>

如何在页面加载的Javascript / JQuery 和 CSS中隐藏除第一个孩子以外的所有孩子？

所以，它实际上应该只显示：

<table id="collapse">
    <tbody>
        <tr>
            <th>Heading</th>
        </tr>
     </tbody>
</table>

注意：我宁愿不为每个孩子添加一个CSS课程，例如.hide_child{display:none;}

Answer 1

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#collapse tr').not(":first-child").hide();
    });
</script>

请参阅：http://jsfiddle.net/FeVnt/

如何在Javascript / JQuery和CSS中隐藏除第一个孩子以外的所有孩子？

1 个答案: