Question

我有一个表，其中包含每个列表中包含数十个列表项的无序列表。列表共享同一个类。我想循环遍历每个列表，如果它有超过5个列表项我想显示前5个并隐藏其余列表并显示指向另一个页面的链接。

我遇到了逻辑问题，因为我只能使用第一个无序列表执行上面所述的操作，然后隐藏了后面的所有其他列表。如果不超过5行，如何检查每个列表并中断并继续下一个？

以下是我尝试过的基本HTML和JS。

提前感谢您的帮助！

＆＃13;

	$('ul.resultsList').each(function () { 
 	        if($(this).children().length > 4) {
			$('li:gt(4)').hide();
			$('.seeMore').show();
		}else {
                        $('.seeMore').hide();
                        return false;
                }
	});

＆＃13;

    <table id="docResults">
	<thead>
		<tr>
			<th>Names</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<ul class="resultsList">
					<li>Smith, J</li>
					<li>Smith, F</li>
					<li>Smith, K</li>
					<li>Smith, L</li>
					<li>Smith, M</li>
					<li>Smith, N</li>
					<li>Smith, O</li>
					<li>Smith, P</li>
					<li>Smith, Q</li>
					<li>Smith, R</li>
				</ul>
				<a href="#" class="seeMore">
			</td>
		</tr>
		<tr>
			<td>
				<ul class="resultsList">
					<li>Smith, J</li>
					<li>Smith, F</li>
					<li>Smith, K</li>
					<li>Smith, L</li>
					<li>Smith, M</li>
					<li>Smith, N</li>
					<li>Smith, O</li>
					<li>Smith, P</li>
					<li>Smith, Q</li>
					<li>Smith, R</li>
				</ul>
				<a href="#" class="seeMore">
			</td>
		</tr>
	</tbody>
</table>

＆＃13;

Answer 1

尝试在此上下文中使用$(this)对象来调用.hide()

$('ul.resultsList').each(function () { 
 var td = $(this).closest("td");
 if($(this).children().length > 4) {
   $('li:gt(4)', this).hide();
   $('.seeMore', td).show(); 
 }else {
   $('.seeMore', td).hide();
 }
});

JQuery：遍历多个列表并为每个

1 个答案:

DEMO