jQuery：选择列表中的最后 4 个项目 [重复]答案

【问题标题】：jQuery: select the last 4 items in the list [duplicate]jQuery：选择列表中的最后 4 个项目 [重复]
【发布时间】：2011-06-04 19:05:41
【问题描述】：

我有一个图片/文本链接列表，

<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>

<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>

然后我在我的 .css 文件中设置列表样式，

li {
  float:left;
  margin:0px 5px 5px 0px; 
}

但是我希望列表中的最后 4 个项目在其边距底部没有 5px 空间的情况下显示。所以我想使用 jQuery 选择最后 4 项并将它们的 css 样式更改为 marginBottom:0px;

问题在于 jQuery 选择最后一项的方式是这样的：

li:last

但是最后 4 个呢？或者可能是最后的 5 个或 6 个？

谢谢。

【问题讨论】：

是的！感谢您指出！ :-)

标签： jquery css list

【解决方案1】：

我想你可以试试这个$("li").slice(-5);

【讨论】：

数字不重要，不是吗？
@Jishny，不是真的.. 被冲昏了头脑，因为从这两种方法中建议使用基于零的一种需要与此方法不同的数字。

【解决方案2】：

使用:gt() 如：

var n = $('ul').size();
var lastFour = $('li:gt(' + n-5 + ')');

http://api.jquery.com/gt-selector/

【讨论】：

【解决方案3】：

$('li').slice(-4).css('color', 'red')

Example

【讨论】：

以上代码将返回最后五个元素，因为 slice 是基于 0 的。
有趣。你试过这个例子吗？似乎从一开始就以0为基础。 $('li').slice(-4).length >> 4
@super，它选择最后四个，因为它是负数。所以从最后算起 4..
非常感谢！ :-)
@lauthiamkok - 不客气！

【解决方案4】：

可以使用过滤方法

var elems = $('ul li');
elems.filter(function(idx){
     /* we use 5  because the index starts at 0 */
     return idx > elems.length-5; 
}).css('margin-bottom','0px');

演示：http://www.jsfiddle.net/Cw3uu/

【讨论】：

非常感谢！ :-)

【解决方案5】：

$('li').slice(-4).addClass('last-li-items');

然后在你的 css 中：

.last-li-items {
    margin-bottom:0 !important;
}

【讨论】：

非常感谢！ :-)

【解决方案6】：

var e = $('li').slice(-4).css('margin-bottom', '0px');

Demo

【讨论】：

非常感谢！ :-)

【解决方案7】：

您可以使用.slice()

$('li').slice(-4)

或者，你可以使用jQuery的:gt()

var size = $('li').size();
$('li:gt('+(size-5)+')');

【讨论】：

应该是-4（OP想要最后4个）
@Gaby：“但是最后 4 个呢？或者最后 5 个或 6 个？”
感谢盖比！:-)
我只是说你的两个例子选择了不同的东西。第一个选择最后 5 个，第二个选择最后一个 4
@Gaby：我的错，解决了这个问题。 :-P