요소 숨기기 및 jQuery를 사용하여 '더보기'

Question

자바 스크립트가 내 장점은 아니지만 올바른 방향에서이 점을 확신 할 수 없습니다.

먼저 이벤트 정보가 포함 된 HTML 테이블을 생성하는 XSLT가 있습니다. 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> 

는 자바 스크립트입니다 : 올바른 방향으로

<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 --> 

그래서 당신은

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

jQuery를

로 할 수있는 0

i 자신을 유효한 범위로 유지하면서 증가/감소를 관리 할 것이라고 믿습니다. ;)

Answer 2

너무 많이 보지 않았지만 jQuery는 약간 OTT 인 것 같습니다. 다음과 같이합니다.

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

페이지에서 11 번째 테이블이 숨겨집니다. 다른 곳에서 테이블을 사용하는 경우, 단지 hideable처럼 모든 클래스를 제공하고

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

Answer 3

가 11 번째에서 테이블을 숨기려면 수행

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

:gt(x)는 인덱스 (형제도 선택 0 기반)보다 큰 것 x;

다시 숨겨진 테이블을 표시하려면

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