1

我正在设置显示超过 50 个元素的 aj 查询移动页面，关于如何在打开页面时仅显示前 10 个元素的任何建议，以及底部的更多按钮，如果单击它可以显示所有元素。我的脚本是：

<body> 

<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1 style="white-space:normal">body</h1>

</div>
<ul  data-role="listview" data-inset="true" data-filter="false">
<li><a href="http://www.mydomain.co.nz/users/262/">Feature listings</a>   </li>

<ul data-role="listview" data-filter="false">

<table>

<li>
    <a href="/users/264/properties/50473">
        <img src="/media/2012/11/01/011528_47689.jpg?m=resize&o[geometry]=80x60&s=f9e49fbb929e8d1b" />          
        <h3>7C/192 Willis Street</font></font></font>, Beijing</h3>
    <p>Buyer Enquiry Over $305,000<br />Ref: 47689</p></a>
</li>  

<li>
    <a href="/users/264/properties/50474">
        <img src="/media/2012/11/01/011533_47722.jpg?m=resize&o[geometry]=80x60&s=b4482c7638c512b4" />          
        <h3>606/35 Abel Smith Street</font></font></font>, Te Aro</h3>
        <p>Tender<br />Ref: 47722</p></a>
</li>

<li>
    <a href="/users/264/listings/50476">
        <img src="/media/2012/11/01/011539_47691.jpg?m=resize&o[geometry]=80x60&s=66def46f1524e177" />
        <h3>8/34 William Street</font></font></font>, Hataitai</h3>
        <p>Buyer Enquiry Over $280,000<br />Ref: 47691</p></a>
</li>  ........
....... over 50 elements
4

1 回答 1

3

您可以尝试对li元素使用 slice 并隐藏它们。

首先，用 CSS隐藏它们：

li { display: none; }

然后在 JavaScript 中显示前 10 个，并设置click 事件侦听器以显示隐藏的事件：

$('li').slice(0,10).css('display', 'block');
$('#more-button').click(function() {
    $('li:hidden').show();
});
于 2012-11-02T01:05:54.200 回答