hiển thị các yếu tố danh sách gần

Question

Đây là an example of what I have already

Các công trình chức năng chính, nhưng bây giờ tôi cần phải thực hiện trong danh sách điều khiển nhỏ hơn, để nó phù hợp hơn với màn hình, vì nó cố định vị trí.

Vì vậy, tôi nghĩ nó sẽ hiển thị ba mục danh sách tiếp theo từ mục hiện hoạt và 2 mục trước đó.

Something như thế này sẽ làm việc, nhưng tôi nghĩ rằng có nên ngắn hơn và thuận nhiều cách:

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

Bất kỳ lời khuyên cho việc tái phân tách mã hiện tại cho hiệu suất tốt hơn sẽ là hữu ích là tốt.

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

liên kết cho các tài liệu next()

này tất cả các mục bạn có thể sử dụng cho tree-traversal

Answer 2

Sử dụng chức năng jQuery sau.

<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 chức năng là ..

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

Answer 3

Bạn có thể thử sử dụng .end(), để tiết kiệm traversing:

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