深入学习jquery源码之parent()和parents()与parentsUntil()

parent([expr])

概述

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

参数

expr String

用来筛选的表达式

查找每个段落的父元素

<div><p>Hello</p><p>Hello</p></div>

$("p").parent()

[ <div><p>Hello</p><p>Hello</p></div>]

查找段落的父元素中每个类名为selected的父元素。

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

$("p").parent(".selected")

[ <div class="selected"><p>Hello Again</p></div> ]

parents([expr])

概述

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

参数

expr String

用于筛选祖先元素的表达式

找到每个span元素的所有祖先元素。

<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>

$("span").parents()

找到每个span的所有是p元素的祖先元素。

$("span").parents("p")

parentsUntil([expr|element][,filter])

概述

查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。

参数

[expr][,filter] String,String

expr: 用于筛选祖先元素的表达式

filter: 一个字符串，其中包含一个选择表达式匹配元素。

[element][,filter] DOMElement,String

element:用于筛选祖先元素的DOM元素

filter: 一个字符串，其中包含一个选择表达式匹配元素。

查找item-a的祖先，但不包括level-1

<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>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

$('li.item-a').parentsUntil('.level-1')
    .css('background-color', 'red');

jquery源码

    jQuery.extend({
        dir: function (elem, dir, until) {
            var matched = [],
                cur = elem[dir];

            while (cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery(cur).is(until))) {
                if (cur.nodeType === 1) {
                    matched.push(cur);
                }
                cur = cur[dir];
            }
            return matched;
        },
        sibling: function (n, elem) {
            var r = [];

            for (; n; n = n.nextSibling) {
                if (n.nodeType === 1 && n !== elem) {
                    r.push(n);
                }
            }

            return r;
        }
    });
	
	
	
	    function sibling(cur, dir) {
        do {
            cur = cur[dir];
        } while (cur && cur.nodeType !== 1);

        return cur;
       }
	
    jQuery.each({
        parent: function (elem) {
            var parent = elem.parentNode;
            return parent && parent.nodeType !== 11 ? parent : null;
        },
        parents: function (elem) {
            return jQuery.dir(elem, "parentNode");
        },
        parentsUntil: function (elem, i, until) {
            return jQuery.dir(elem, "parentNode", until);
        }
    }, function (name, fn) {
        jQuery.fn[name] = function (until, selector) {
            var ret = jQuery.map(this, fn, until);

            if (name.slice(-5) !== "Until") {
                selector = until;
            }

            if (selector && typeof selector === "string") {
                ret = jQuery.filter(selector, ret);
            }

            if (this.length > 1) {
                // Remove duplicates
                if (!guaranteedUnique[name]) {
                    ret = jQuery.unique(ret);
                }

                // Reverse order for parents* and prev-derivatives
                if (rparentsprev.test(name)) {
                    ret = ret.reverse();
                }
            }

            return this.pushStack(ret);
        };
    });

深入学习jquery源码之parent()和parents()与parentsUntil()

猜你喜欢