深入學習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);
        };
    });