Question

给出以下html：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item ADD</li>
</ul>

使用jQuery，如何动态选择最后的X项，不包括最后一项。例如，对于3，我如何在除最后一项之外的最后3项中设置css。：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li style="background:red;">Item 6</li>
    <li style="background:red;">Item 7</li>
    <li style="background:red;">Item 8</li>
    <li>Item ADD</li>
</ul>

有什么建议吗？感谢

Answer 1

使用:gt()与否定索引，:not和:last的组合：

$('li:gt(-5):not(:last)').css('color','red');

<强> jsFiddle example

Answer 2

使用jQuery的.slice（）方法。

见这里：How to select a range of elements in jQuery

$("ul li").slice(5,8)

Answer 3

var x //The number of children you want
var n = $("ul > li").size()
n = n-1 //this prevents taking the last one 
for ( var i = x; i > 0; i-- ) {
   $( "ul li:nth-child(n-i)" ).append( "<style>etc." );
}

如何使用jQuery选择列表中的最后X项？

3 个答案: