Question

主要功能有效，但现在我需要使控制器列表更小，以便它更适合屏幕，因为它是固定的。

所以，我认为它应该显示活动项目中的下三个列表项目和前两个列表项目。

这样的东西可行，但我认为应该有更短更方便的方式：

//Display closest items
$('#historyController li.active').prevAll('li:not(.first)').hide().slice(0,2).show();
$('#historyController li.active').nextAll('li:not(.last)').hide().slice(0,3).show();

任何有关重新分解当前代码以获得更好性能的提示也会有所帮助。

Answer 1

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

$('li.third-item').next().css('background-color', 'red');

文档的链接next()

您可以使用tree-traversal

的所有项目

Answer 2

使用以下jQuery函数。

<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>

Jquery函数是..

$('li.item-a').closest('ul').css('background-color', 'red');

Answer 3

您可以尝试使用.end()，以便节省遍历：

$('#historyController li.active').prevAll('li:not(.first)').hide().slice(0,2).show().end().end().nextAll('li:not(.last)').hide().slice(0,3).show();

仅显示最接近的列表元素

3 个答案: