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()函数实际上返回我们添加类的项目。这允许我们将功能“链接”在一起。

See it in action here

参考 -

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获取活动项目之前的所有元素，然后添加活动项目本身，并仅使用slice函数返回最后3项。使用包含特殊add选择器的+函数在li.active之后添加项目

demo

jQuery找到最接近的元素

5 个答案:

See it in action here