15

DOM API で同等のjQuery.closest()に取り組んでいる人はいますか?

セレクター レベル 2 ドラフトではjQuery.is()matches()と同等のものを追加しているように見えるため、ネイティブに最も近いものを書くのははるかに簡単です。セレクターへの追加が発生しましたか?closest()

4

6 に答える 6

12

Chrome 40 は、ここで指定されたネイティブelement.closest()メソッド ( http://blog.chromium.org/2014/12/chrome-40-beta-powerful-offline-and.html )をもたらすようです: https://dom.spec.whatwg .org/#dom-element-closest

于 2014-12-04T21:51:02.673 に答える
3

matchesこれは、まだ広くサポートされていませんが、関数を考えると非常に簡単なように思えます。

function closest(elem, selector) {
    while (elem) {
        if (elem.matches(selector)) {
            return elem;
        } else {
            elem = elem.parentElement;
        }
    }
    return null;
}

問題は、matches機能が適切にサポートされていないことです。これはまだ比較的新しい API であるためwebkitMatchesSelector、Chrome と Safari、およびmozMatchesSelectorFirefox で利用できます。

于 2013-03-11T00:04:13.510 に答える
1

element.closest() を使用すると、最も近い祖先に一致するセレクターを見つけることができます。このメソッドはセレクター リストをパラメーターとして取り、最も近い先祖を返します。Rob のコメントによると、この API は chrome 41 および FF 35 から利用可能になります。

whatwg仕様で説明されているようにhttps://dom.spec.whatwg.org/#dom-element-closest

例: 以下の HTML は、警告メッセージ「true」を表示します。

<html>
    <body>
        <foo>
            <bar>
                <a id="a">
                    <b id="b">
                        <c id="c"></c>
                    </b>
                </a>
            </bar>
         </foo>
    <script>
        var a = document.getElementById('a');
        var b = document.getElementById('b');
        var c = document.getElementById('c');
        alert(c.closest("a, b")==b);
    </script>
    </body>
</html>
于 2015-01-02T11:41:14.117 に答える
1

少しの再帰がうまくいきます。

// get nearest parent element matching selector
var closest = (function() {
    var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

    return function closest(el, selector) {
        return !el ? null :
        matchesSelector.call(el, selector) ? el : closest(el.parentElement, selector);
    };
})();
于 2015-08-19T13:11:41.610 に答える