jQuery查找壁橱元素答案

【问题标题】：jQuery find closets elementsjQuery查找壁橱元素
【发布时间】：2012-10-01 13:36:16
【问题描述】：

我正在寻找方法来查找并选择 5 个最接近的“li”（2、3、4、5 和 6）与“active”类有什么想法吗？

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

谢谢:)

【问题讨论】：

如果一个是active，你真的想要最接近的5个项目吗？还是你只想要一二三？

标签： jquery html css class css-selectors

【解决方案1】：

单行答案

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

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

demo

【讨论】：

【解决方案2】：

如果你必须有 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);

应该这样做。

【讨论】：

【解决方案3】：

试试这个：

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

$5 是你的收藏。

【讨论】：

是的...这行得通...不是您的标准语法，可读性值得怀疑...但是...工作永远不会少

【解决方案4】：

您可以使用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/

【讨论】：

您可能应该检查该切片方法的负索引...slice(-1, 3) 是行不通的。哦...应该是 ind+2，对吧？
@mayhewr 是的，我正在更新代码，使用 ind+2 它将选择四个元素。
如果 ind 为 4，则 4-2 到 4+2 为 2 到 6... 2、3、4、5、6（5 个元素）。此外，如果 ind 为 1，您可能应该上升到 ind+4，以便获得全部 5。
@mayhewr jsfiddle.net/NWJ6h，OP 想在活动元素之后选择 2 个元素，在活动元素之前选择 2 个元素，而不是 5 个元素。
他……告诉你了吗？他告诉我“5 最接近”

【解决方案5】：

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

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

参考-

【讨论】：