我正在设置一个显示超过 50 个元素的 j 查询移动页面，关于如何在打开页面时仅显示前 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
最佳答案
您可以尝试对 li 元素使用 slice 并隐藏它们。
首先，用 CSS 隐藏所有:
li { display: none; }
然后在 JavaScript 中显示前 10 个，并设置点击事件监听器以显示隐藏的:
$('li').slice(0,10).css('display', 'block');
$('#more-button').click(function() {
$('li:hidden').show();
});
关于javascript - 带有更多按钮的 jquery 移动页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13185549/