javascript - 最も近いリスト要素のみを表示

Question

これは私がすでに持っているものの例です

主な機能は動作しますが、コントローラーのリストを小さくして、位置が固定されているため、画面にうまく収まるようにする必要があります。

したがって、アクティブなアイテムから次の 3 つのリストアイテムと前の 2 つのリストアイテムを表示する必要があると思います。

このようなものは機能しますが、より短くて便利な方法があるはずです：

//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

トラバースを節約するために、.end()を使用してみてください。

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

Answer 3

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

これは、ツリー トラバーサルに使用できるすべてのアイテムです。