Question

JavaScript不是我的强项，但我不确定我是从正确的方向打这个。

首先，我有一些XSLT生成包含事件信息的HTML表。我为每个匹配XSL位置（）的表分配了一个数字ID。

我想要实现的只是显示前10个表，直到用户点击“查看更多”链接，然后显示接下来的10个表，直到元素结束。

我从一开始就遇到了一个问题，因为我编写的代码并没有将表格隐藏在10以上，现在页面崩溃了，我认为这是一个无限循环：

这是XSLT：

<xsl:for-each select="umbraco.library:GetMedia(1116, 'true')/node">
    <xsl:variable name="fileName" select="data [@alias = 'file']" />
    <xsl:variable name="tableID" select="position()" />

    <table id="{$tableID}">
    <tr>
        <td class="eventDate">
            <xsl:value-of select="data [@alias = 'eventDate']"/></td>
        <td><a href="/downloader?file={$fileName}" target="_blank()" class="eventTitle"><xsl:value-of select="data [@alias = 'title']"/></a></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td class="newsSubTitle"><xsl:value-of select="data [@alias = 'subTitle']"/></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/borders/news_separator.gif" />
        </td>
    </tr>
    </table>
</xsl:for-each>

这是JavaScript：

<script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var rc = $('#eventReportsList table').length;

            if(rc > 10) {
                var i=0;
                for (i=11;i=rc;i++) {
                    var currElement = '#' + i;
                    $(currElement).hide();
                }   
            };
            alert('Count ' + rc);
        });
    </script>

正确方向的一些帮助或指示会很棒！

感谢。

Answer 1

隐藏第11页的表格：

$('table:gt(9)').hide();

:gt(x)选择索引（从0开始）大于x的兄弟姐妹;

再次显示隐藏的表：

$('table:hidden').show();

Answer 2

更改了XSL：

<xsl:variable name="tablesPerSet" select="10" />

<xsl:for-each select="umbraco.library:GetMedia(1116, 'true')/node">
  <xsl:variable name="posZ" select="position() - 1" />
  <xsl:variable name="tableSetId" select="
    ($posZ - ($posZ mod $tablesPerSet)) div $tablesPerSet
  " />
  <table class="hideable tableSet_{$tableSetId}">
    <!-- ... -->
  </table>    
</xsl:for-each>

结果：

<table class="hideable tableSet_0"></table><!-- #1 -->
<!-- ... -->
<table class="hideable tableSet_0><!-- #10 -->
<table class="hideable tableSet_1"></table><!-- #11 -->
<!-- and so on -->

所以你可以用jQuery

// first hide all, then show only those that match i
$("table.hideable").hide().is(".tableSet_" + i).show();

我相信你会管理递增/递减i，同时自己保持有效范围。 ;）

Answer 3

我没有太多关注它，但你的jQuery似乎有点OTT。类似的东西：

$('table').filter(function(index) {
    return index > 10;
}).hide();

将在您的页面上隐藏第11个表格。如果您在其他地方使用表格，只需给它们一个像hideable这样的类，然后执行

$('.hideable').filter(function(index) {
    return index > 10;
}).hide();

使用jQuery隐藏元素和“查看更多”

3 个答案: