HTML代码:
<div> <span> 1 span</span> <span> 2 span</span> <span> 3 span</span> <span> 4 span</span> </div>
效果:从匹配的元素集中选取除索引为1的元素,将最终匹配的元素加上红色边框突出显示,并更改匹配元素内文字内容为"匹配元素”。
如果是要求"从匹配的元素集中取序数为1的元素”,实现代码如下:
$("span:eq(1)")
但现在要实现的是"从匹配的元素集中选取除索引为1的元素”,实现代码如下所示:
<br /> $("span:not(:eq(1))")
最终实现代码:
$("span:not(:eq(1))").css({ //基本过滤选择器:not() & :eq()搭配使用 border:"2px red solid" }).text('匹配元素!');
查看实际运行效果↓↓
提示:你可以先修改部分代码再运行。
---------------- 这是分界线,跨界讨论另一个问题 ----------------
若要"从匹配的元素集中取序数等于大于2的元素”,jq如何实现?
复制下面代码,运行即可看到想要的效果:
<script type="text/javascript"> $(function(){ $("input[type='button']").focus().click(function(){ $("span:gt(1)").add($("span").eq(1)).css({ //先使用基本过滤选择器:gt(1)选取匹配索引大于1的元素,再用过滤元素集函数.eq(1)选取匹配索引等于1的元素,最后用查找元素集函数add()连接两个元素结果集,以应用css{()}定义的样式<br /> border:"2px red solid" }).text('被选中!'); }) </script>
若要"从匹配的元素集中取第[n,m]个匹配元素”,jq如何实现?
即获取匹配元素序数为[n-1,m-1]的元素,写法为" :gt(n-1-1):lt(m-1-(n-1)+1) " 。
如我要获取匹配元素集中的第[2,3]个匹配元素,复制下面代码,运行即可看到想要的效果:
<script type="text/javascript"> $(function(){ $("input[type='button']").focus().click(function(){ $("span:gt(0):lt(2)").css({ border:"2px red solid" }).text('被选中!'); }) }) </script>
上一篇: 引用google的在线jQuery库
下一篇: filter()、find()函数的区别
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}