jQuery 遍历 - slice() 方法

今天项目中遇到要获取前几个和最后几个元素,查了资料发现了这个slice()方法很实用,废了一番功夫终于明白怎么用的了。
slice(start[,end]):start类型:Integer

开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起。

end (可选)类型:Integer

结束选取自己的位置,如果不指定,则就是本身的结尾。

如果提供的jQuery代表了一组DOM元素,slice()方法从匹配元素的子集中构造一个新的jQuery对象。所提供的start索引标识的设置一个集合中的元素的位置;如果end被省略,这个元素之后的所有元素将包含在结果中。

例如:

<ul>

<li>list item
1</li>
   
<li>list item
2</li>
   
<li>list item
3</li>
   
<li>list item
4</li>
   
<li>list item
5</li>
</ul>
1. $(‘li‘).slice(2).css(‘background-color‘, ‘red‘);
上述代码的执行结果是,第
3,4,5 项列表项的背景色变成了红色。注意,索引是从 0 开始计数的,并且代表的是 jQuery
对象中的元素位置。
2.$(‘li‘).slice(2, 4).css(‘background-color‘, ‘red‘);
上述代码的执行结果是,只有第
3 和第 4 项列表项会被选中。索引依然是从 0 开始计数的,但是在被选中的元素中不包括 end 参数所指定的元素。
3.负索引
jQuery的.slice()方法是仿照的JavaScript
数组的.slice()方法。其中的一个功能就是允许传入负的 start 和 end 参数。如果传递的是负数,那么下标位置是从结尾开始的,而不是从起始位置开始。例如:
$(‘li‘).slice(-2,
-1).css(‘background-color‘, ‘red‘);
结果只有项4是变成了红色,因为它是唯一满足条件的列表项,即被选中的元素是从倒数第二个元素(-2)开始到最后一个元素(-1 )(不含此元素)之间的元素。
$(‘li‘).slice(-2).css(‘background-color‘, ‘red‘);
结果第4,5项是变成了红色,即被选中的元素是从倒数第二个元素开始到最后一个元素(包含此元素)之间的元素。

时间: 2024-10-26 02:09:04

jQuery 遍历 - slice() 方法的相关文章

jQuery 遍历 - find() 方法

jQuery 遍历参考手册 实例 搜索所有段落中的后代 span 元素,并将其颜色设置为红色: $("p").find("span").css('color','red'); 亲自试一试 定义和用法 find() 方法获得当前元素集合中每个元素的后代,通过选择器.jQuery 对象或元素来筛选. 语法 .find(selector) 参数 描述 selector 字符串值,包含供匹配当前元素集合的选择器表达式. 详细说明 如果给定一个表示 DOM 元素集合的 jQu

jQuery遍历节点方法汇总

1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 1 <p>Hello</p> 2 <div> 3 <span>Hello Again</span> 4 <p class="box">您好!</p> 5 </div> 6 <p>And Again</p> 7 8 <script type="t

jQuery 遍历 - children() 方法 获取指定id下子元素的值

<a id="Aobj_2_2" class="" specid="2" specvid="2" href="javascript:void(0);"> <span>红色</span> <i title="点击"></i> </a> $("#Aobj_2_2").children("sp

JQuery 遍历 - prev() 方法

http://www.w3school.com.cn/jquery/traversing_prev.asp http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp 描述:取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合.选择性筛选的选择器. 如果提供的jQuery代表了一组DOM元素,.prev()方法通过这些元素组合传递到方法构造一个新的jQuery对象. 该方法选择性地接受同一类型选择器表达式,我们可以传递给

jQuery 遍历 - eq() 方法

<!DOCTYPE html> <html> <head> <style> div { width:60px; height:60px; margin:10px; float:left; border:2px solid blue; } .blue { background:blue; } </style> <script type="text/javascript" src="/jquery/jquery.j

jQuery 遍历 json 方法大全

1.for循环: var obj = { "status":1, "bkmsg":"\u6210\u529f", "bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u6dfb\u52a0\u8bb0\u5f55"] } // console.log(obj.length); if (obj.status == 1) { for

jQuery 遍历 - each() 方法

$(selector).each(function(index,element)) 输出每个 li 元素的文本: $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); <script type="text/javascript">    $(function () {        $(".thbg p&quo

jQuery 遍历方法大全

下表列出了用于jQuery 遍历所有方法. 方法 描述 add() 将元素添加到匹配的元素集中 addBack() 将上一组元素添加到当前组中 andSelf() 在版本1.8中已弃用. addBack()的别名 children() 返回所选元素的所有直接子级 closest() 返回所选择元素的第一个祖先 contents() 返回所选元素的所有直接子级(包括文本和注释节点) each() 为每个匹配的元素执行一个函数 end() 结束当前链中的最新过滤操作,并将匹配的元素集返回到其先前状态

Jquery获取元素方法

Jquery 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 1.获取本身: a.只需要一种jQuery选择器 选择器 实例 说明 #Id $('#myId') ID选择器: 可以获取到ID为"myId"的元素,区分大小写 b.多种jQuery选择器组合 b1.jQuery选择器 选择器 实例 说明 .class $('.myClass') 类选择器:可以获取到class为'myClass'的所有元素 element $('p') 获取所有的<p>元素