深入学习jquery源码之siblings()和children()与contents()

深入学习jquery源码之siblings()和children()与contents()

siblings([expr])

概述

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

参数

expr String

用于筛选同辈元素的表达式

找到每个div的所有同辈元素。

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

$("div").siblings()

[ <p>Hello</p>, <p>And Again</p> ]

children([expr])

概述

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

参数

expr String

用以过滤子元素的表达式

查找DIV中的每个子元素。

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

$("div").children()

[ <span>Hello Again</span> ]

在每个div中查找 .selected 的类。

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

$("div").children(".selected")

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

contents()

概述

查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

查找所有文本节点并加粗

<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

$("p").contents().not("[nodeType=1]").wrap("<b/>");

<p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>

往一个空框架中加些内容

<iframe src="/index-blank.html" width="300" height="100"></iframe>

$("iframe").contents().find("body")
  .append("I'm in an iframe!");

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({
        siblings: function (elem) {
            return jQuery.sibling((elem.parentNode || {}).firstChild, elem);
        },
        children: function (elem) {
            return jQuery.sibling(elem.firstChild);
        },
        contents: function (elem) {
            return jQuery.nodeName(elem, "iframe") ?
                elem.contentDocument || elem.contentWindow.document :
                jQuery.merge([], elem.childNodes);
        }
    }, 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);
        };
    });