jquery - jQuery查找壁橱元素

Question

我正在寻找找到并选择“活动”类的 5 个最接近的“li”（二、三、四、五和六）的方法。有什么想法吗？

<li class="one">Hello</li>
<li class="two">Hello</li>
<li class="three">Hello</li>
<li class="four active">Hello</li>
<li class="five">Hello</li>
<li class="six">Hello</li>
<li class="seven">Hello</li>
<li class="eight">Hello</li>

谢谢 ：）

Answer 1

您可以使用index和slice方法：

var $li = $('li');
var ind = $li.filter('.active').index(); 
if ( ind-2 < 0 ) ind = 0;

$li.slice(ind-2, ind+3);

http://jsfiddle.net/dc8Xu/

Answer 2

尝试这个：

var $a = ​$( ".active" ),
    $all = $a.​​​​​​siblings().andSelf(),
    i = $all.index( $a ),
    i0 = i < 2 ? 0 
    : i + 5 > $all.length ? $all.length - 5 : i - 2;
    $five = $all.slice( i0, i0 + 5 );

$five 是你的收藏。

Answer 3

不是我给过的最漂亮的代码示例......但确实有用:)

var activeItem = $('li.active');

activeItem.prev('li').addClass('active').prev('li').addClass('active');
activeItem.next('li').addClass('active').next('li').addClass('active');

我在这里使用了 jQuery 的一个特性，称为链接。这意味着我使用的函数实际上返回了执行操作的对象本身。所以这个addClass()函数实际上返回了我们添加类的项目。这允许我们将函数“链接”在一起。

在此处查看实际操作

参考 -

• next()
• prev()

Answer 4

如果你必须有 5 个结果：

var length = $('li').length;
var start = $('.active').index() - 2;
start = start + 5 > length ? length - 6 : start;
start = start < 0 ? 0 : start;
var result = $('li').slice(start, start + 5);

应该这样做。

Answer 5

单行答案

$('li.active').prevAll().andSelf().slice(-3).add('li.active + *').add('li.active + * + *').css('color','red');

说明：首先获取活动项之前的所有元素，prevAll然后添加活动项本身，并且只返回最后3项与slice函数。使用包含特殊选择器li.active的函数添加后面的项目add+

演示