Hide items and view more with jQuery

Question

JavaScript is not my forte, but then I’m not sure if I am clicking on it from the right direction.

First, I have an XSLT that creates HTML tables with information about the events in them. I assign a numeric identifier for each table that corresponds to the XSL () position.

What I want to achieve is to show only the first 10 tables, as long as I click on the "View more" link, and the next 10 tables are displayed until the end of the elements.

I had a problem from the very beginning that the code I wrote does not hide tables for more than 10, and now the page crashes in what I assume is an infinite loop:

Here is the 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>

Here is the 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

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 2

11- :

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

:gt(x) ( 0) x;

:

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

Answer 3

I haven't looked at this too much, but your jQuery seems a bit OTT. Sort of:

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

will hide the 11th table ahead on your page. If you use tables elsewhere, just give them all classes like hideable and do

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