如何取得当前元素的jquery选择父元素素的jquery选择父元素素

来源：蜘蛛抓取(WebSpider) 时间：2015-04-19 04:24 标签： jquery父元素
阅读(1573)
　　我们这里主要总结jQuery中对某元素的兄弟元素、子元素和父元素的获取，原声的Javascript代码对这些元素的获取比较麻烦一些，而jQuery正好对这些方法进行封装，让我们更加方便的对这些元素进行获取和操作。
jQuery提供的方法
　　上来就把jQuery提供的方法摆在这里是不是有点不好呀，不过，我们从jQuery的方法名称上就能知道这些方法是干嘛的了。
parent(selector)
查找父元素，可传入selector进行过滤(下同)
parents(selector)
查找所有的祖先节点
children(selector)
返回所有的子节点，不过该方法只会返回直接的子节点，不会返回所有的子孙节点
返回该节点的上一个兄弟节点
返回该节点之前所有的节点
返回该节点的下一个兄弟节点
返回该节点之后所有的节点
siblings()
返回该节点所有的兄弟节点，不分前后
find(selector)
返回该节点所有的子孙节点
　　看完所有的方法之后，我们可以发现：children()只能获取直接的子节点；而find能获取所有的子孙节点，当然也包括直接的子节点。
　　让我们通过一个直观的例子来看看这些方法是怎么使用的，【】
　　从实例中我们能够很清楚的看到这些方法都是获取的哪些元素，比如parent()是获取当前元素的直接父亲元素，而parents()是获取所有的父亲元素（也包括其直接父元素）。前面的那些方法使用起来都比较简单，不过这里还是要多说一句：所有的方法都能接收一个selector参数来对获取到的结果集进行过滤，来真正的获取我们想要的元素。find()方法的使用是我们这里重点要讲的。
find(selector)方法的讲解
官方文档的解释：通过一个选择器、jQuery对象或元素过滤，得到当前匹配的元素集合中每个元素的后代。
我们通过这样的代码来更加清晰地了解这句话的意思：
$("#main").find('.list')
// 选择器过滤
var $span = $('span');
$('#main').find($span);
// jQuery对象过滤
var span = $('span')[0];
$('#main').find(span)
// DOM元素过滤
从上面的代码中我们可以看到三种方式都能从$main的所有子孙元素中获取相应的元素。而且find()方法获取子孙元素时采用的时深度搜索优先的策略进行检索的。还是拿我们上面的实例来举例，$(&.current&)就是当前的元素，然后用find()获取该元素所有的子孙元素：
　　从上面的图中我们可以看到，find()先找到第一个.item元素，然后开始检索.item里的子元素.s；.item里的子元素检索完成以后，开始寻找第二个.item元素，然后接着检索第二个.item里的子元素；第二个.item检索完成后，开始进行第三个。深度优先的策略就是：先闷头一直往下找，下一个没有元素时再确认是否有next()兄弟元素，如果没有兄弟元素，那么再往上返回一级，确认这个元素有没有兄弟元素，直到第一级的子元素；如果当前元素有兄弟元素，那么就从这个兄弟元素开始往下执行深度搜索。待所有的子元素检索完毕后，find()方法结束。
　　这篇文章比较短，不过也算是探索了一下这些方法的使用，能够从例子中直观的看到这些方法获取到的是哪些元素。
　　本文地址：原文链接:
阅读排行榜6486人阅读
JS/DHTML/CSS（112）
例如处理事件的时候，有时候需要知道当前点击的是第几个子节点，而HTML DOM本身并没有直接提供相应的属性，需要自己来计算。
从一个索引序号，很容易得到该索引对应的子节点或者子元素，直接用parentNode.childNodes[index] 或&parentNode.children[index] 就行。
但反过来，已知一个节点或元素对象，要知道它的索引序号则没有那么直接了。
一些特殊的元素，HTML DOM有对应的属性表示其索引序号，主要是表格的TD 和 TR 元素。
表格单元格TD元素有 cellIndex 属性。
表格行TR元素有rowIndex属性。
如果你的处理目标刚好就是表格，则优先使用这两个属性。
但一般的节点或元素并没有 childNodeIndex 或者 childElementIndex 之类的属性。
解决方案主要分为两类：
一、预先计算并缓存节点的索引号(可以存在节点属性或者js变量中)。
二、实时计算，需要遍历部分节点。
应用中，可根据不同的实际情况，选用上述两类方案之一。
适用方案一的情形：
当DOM结构不会变化，并且需要频繁的获取个别节点的索引，可采用方案一。
优点是后续读取快，缺点是初始化需要开销，DOM结构变化后需要重新初始化。
适用方案二的情形：
DOM结构可能会变化，并且不是特别频繁的获取个别节点的索引，可采用方案二。
优点是不受DOM结构变化的影响，不会污染DOM结构，没有初始化开销。缺点是不适合高频率调用。
一般而言，采用方案二是更好的，因为通常DOM树规模是比较有限的，一轮的循环并不会导致显著降低整体性能，而其优点则是显著的。
对于IE浏览器，则有更直接的方法。
从IE4到IE11，都有sourceIndex属性，这个属性表示了元素在DOM树的顺序，比较元素和父元素的sourceIndex的差值就很容易知道元素是第几个子元素了。
我写了一段函数来区分处理，在IE下采用sourceIndex高效判断，非IE则采用一般遍历。
function getChildrenIndex(ele){
//IE is simplest and fastest
if(ele.sourceIndex){
return ele.sourceIndex - ele.parentNode.sourceIndex - 1;
//other browsers
while(ele = ele.previousElementSibling){
i++;
上面的函数只是计算元素Element，也就是nodeType为1的节点，文本节点、注释节点等将不被统计。如果需要计算所有节点在内，则不能适用sourceIndex，因为该属性只针对Element. &previousElementSibling也要相应的改为previousSibling. 那就要写成如下的函数了：
function getNodeIndex(node){
while(ele = ele.previousSibling){
i++;
后记：在非IE下，有 compareDocumentPosition 方法用于比较节点的位置关系，但经过测试该方法的性能非常差，其内部的实现机制肯定不是像IE那样缓存了资源索引号的，如果这个方法极高效，那就可采用二分法进行计算，从而提高效率，但目前还不可能。
最后的总结：
对于表格TD和TR元素优先使用cellIndex和rowIndex属性。
对于IE优先使用sourceIndex属性。
其它情形使用previousElementSibling 或 previousSibling 进行遍历。
compareDocumentPosition 方法的性能非常差。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：902856次
积分：10538
积分：10538
排名：第1225名
原创：165篇
转载：73篇
评论：247条jQuery 遍历 - parent() 方法
jQuery 遍历 - parent() 方法
查找每个段落的带有 &selected& 类的父元素：
$(&p&).parent(&.selected&)
定义和用法
parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
.parent(selector)
字符串值，包含用于匹配元素的选择器表达式。
如果给定一个表示 DOM 元素集合的 jQuery 对象，.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素，并用匹配元素构造一个新的 jQuery 对象。 和 .parent() 方法类似，不同的是后者沿 DOM 树向上遍历单一层级。
该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面：
&ul class=&level-1&&
&li class=&item-i&&I&/li&
&li class=&item-ii&&II
&ul class=&level-2&&
&li class=&item-a&&A&/li&
&li class=&item-b&&B
&ul class=&level-3&&
&li class=&item-1&&1&/li&
&li class=&item-2&&2&/li&
&li class=&item-3&&3&/li&
&li class=&item-c&&C&/li&
&li class=&item-iii&&III&/li&
如果我们从项目 A 开始，则可找到其父元素：
$('li.item-a').parent().css('background-color', 'red');
此次调用的结果是，为 level-2 列表设置红色背景。由于我们未应用选择器表达式，父元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。

我要回帖

更多关于 jquery父元素 的文章

 

随机推荐