javascript - 仅显示最近的列表元素

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

使用以下 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 2

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

这所有项目都可以用于树遍历

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();