jQuery参考实例 2.2 选择同级邻近元素
2013-04-13 17:27
330 查看
原文:
http://www.lifelaf.com/blog/?p=274
本文翻译自jQuery Cookbook (O’Reilly 2009) 2.2 Selecting Specific Siblings
如果想要选中紧邻h1元素之后的h2元素,可以使用以下选择器:
在这个例子中,只有第一个h2元素会被选中。第二个h2元素不会被选中,因为它并未紧邻h1。
如果想要对某个元素的所有同级元素进行选择、过滤,而不论其紧邻与否,我们可以使用jQuery的siblings()方法,并通过传入一个选择器表达式来对结果进行过滤:
有时,我们会根据同级元素相互之间的位置关系来进行选择;以下面的HTML片段为例:
可以使用以下方法来选择第二个li元素(li.selected)之后的所有li对象:
nextAll()方法与siblings()方法一样,可以接受一个选择器表达式来对选择到的结果进行过滤。如果不传入该选择器表达式,返回的则是目标对象之后的所有同级元素。
对于选择第二个li元素之后的所有li对象,除了之前的方法,还可以通过另外一个CSS连接符来实现。连接符~是在CSS3标准中被加入的,因此,你可能还无法在实际工作的样式表中使用这个连接符 — 但幸运的是,我们可以在jQuery中使用该连接符而无需担心浏览器的支持问题。除了选中的是目标对象之后的所有同级元素,~连接符的使用与紧邻同级连接符+的使用基本一致。对于之前的HTML片段来说,可以用以下选择器来选中所有li.selected元素之后的li元素:
值得一提的是,+连接符的功能也可以不通过选择器来实现:
next()方法可以很好的替代+选择器,尤其当我们与jQuery对象变量打交道的时候:
----
翻译:shaochuancs@gmail.com
http://www.lifelaf.com/blog/?p=274
本文翻译自jQuery Cookbook (O’Reilly 2009) 2.2 Selecting Specific Siblings
需求
在某元素的同级邻近元素中进行选择。解决方案
如果需要选择的是紧邻某个对象的同级元素,我们可以使用“紧邻同级”连接符(+)。与子级连接符(>)类似,该连接符的两边各需一个选择器表达式。右边的表达式表示待选中的元素,而左边的表达式则表示紧邻的那个对象。以下面的HTML片段为例:<div id="content"> <h1>Main title</h1> <h2>Section title</h2> <p>Some content...</p> <h2>Section title</h2> <p>More content...</p> </div>
如果想要选中紧邻h1元素之后的h2元素,可以使用以下选择器:
jQuery('h1 + h2'); //选择所有紧邻h1元素之后的h2元素
在这个例子中,只有第一个h2元素会被选中。第二个h2元素不会被选中,因为它并未紧邻h1。
如果想要对某个元素的所有同级元素进行选择、过滤,而不论其紧邻与否,我们可以使用jQuery的siblings()方法,并通过传入一个选择器表达式来对结果进行过滤:
jQuery('h1').siblings('h2,h3,p'); //选择h1同级元素中的所有h2、h3、p元素
有时,我们会根据同级元素相互之间的位置关系来进行选择;以下面的HTML片段为例:
<ul> <li>First item</li> <li class="selected">Second item</li> <li>Third item</li> <li>Fourth item</li> <li>Fifth item</li> </ul>
可以使用以下方法来选择第二个li元素(li.selected)之后的所有li对象:
jQuery('li.selected').nextAll('li');
nextAll()方法与siblings()方法一样,可以接受一个选择器表达式来对选择到的结果进行过滤。如果不传入该选择器表达式,返回的则是目标对象之后的所有同级元素。
对于选择第二个li元素之后的所有li对象,除了之前的方法,还可以通过另外一个CSS连接符来实现。连接符~是在CSS3标准中被加入的,因此,你可能还无法在实际工作的样式表中使用这个连接符 — 但幸运的是,我们可以在jQuery中使用该连接符而无需担心浏览器的支持问题。除了选中的是目标对象之后的所有同级元素,~连接符的使用与紧邻同级连接符+的使用基本一致。对于之前的HTML片段来说,可以用以下选择器来选中所有li.selected元素之后的li元素:
jQuery('li.selected ~ li');
讨论
紧邻同级连接符(+)在概念上比较“另类”,因为它不像其它大多数选择器表达式那样,通过元素之间的上下层级关系来定位。不过,该连接符还是值得了解一番的,同时它也不失为一种快速选择目标的良好方案。值得一提的是,+连接符的功能也可以不通过选择器来实现:
jQuery('h1').next('h2');
next()方法可以很好的替代+选择器,尤其当我们与jQuery对象变量打交道的时候:
var topHeaders = jQuery('h1'); topHeaders.next('h2').css('margin','0');
----
翻译:shaochuancs@gmail.com
相关文章推荐
- jQuery参考实例 1.3 使用选择器和jQuery函数对DOM元素进行选择
- jQuery参考实例 1.4 在特定范围中选择DOM元素
- jQuery参考实例 1.8 将前一次选择的元素集合并到当前选择的元素集中
- jQuery参考实例 1.9 以当前选择的元素为起点,遍历查找DOM对象
- jQuery参考实例 2.3 根据元素的索引顺序来进行选择
- 关于jQuery参考实例2.0 用jQuery选择元素
- 关于jQuery参考实例2.0 用jQuery选择元素
- jQuery参考实例 2.0 用jQuery选择元素
- jQuery参考实例 2.1 仅选择子级元素
- jQuery参考实例 1.8 将前一次选择的元素集合并到当前选择的元素集中
- jQuery参考实例 1.10 创建、编辑并插入DOM元素
- jQuery参考实例 1.11 移除DOM元素
- jQuery参考实例 1.12 替换DOM元素
- jQuery参考实例 1.6 在当前选中的元素集中查找下级元素
- jquery选择器 之 获取父级元素、同级元素、子元素
- jQuery参考实例 1.2 在DOM加载完毕,页面元素完全加载之前运行jQuery/JavaScript代码
- jQuery参考实例 1.5 对jQuery封装后的元素集进行过滤
- jQuery参考实例 1.7 返回元素集在更改操作之前的状态
- jQuery内容过滤选择器选择元素实例讲解
- jQuery参考实例 1.13 复制DOM元素