Скрыть элементы и «Просмотреть больше» с помощью jQuery

Question

JavaScript - не моя сильная сторона, но я не уверен, что попал в правильное русло.

Во-первых, у меня есть XSLT, который создает HTML-таблицы с информацией о событиях в них. Я присваиваю числовой идентификатор каждой таблице, которая соответствует позиции XSL ().

Чего я хочу добиться, так это отображать только первые 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 кажется немного ОТТ. Что-то вроде:

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

будет скрывать 11-ю таблицу на вашей странице. Если вы используете таблицы в другом месте, просто присвойте им все классы вроде hideable и выполните

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