Am nächsten Vorfahren passenden Selektor mit nativen DOM?

Ist jemanden arbeiten, auf eine jQuery.am nächsten() Entsprechung in der DOM-api?

Sieht aus wie die Selectors Level 2 Entwurf fügt matches() entspricht jQuery.ist()also nativen am nächsten sein sollte, viel einfacher zu schreiben. Hat hinzufügen closest() an-Selektoren kommen?

InformationsquelleAutor der Frage hurrymaplelad | 2013-03-10

  1. 5

    Element.am nächsten()

    Ihre Unterstützung

    Umsetzung einer solchen Funktion mit Element.matches() scheint nicht optimal in Bezug auf Leistung, verursachen offenbar matches() wird ein Aufruf von querySelectorAll() jedes mal, wenn Sie testen, ein Elternteil, während nur ein Anruf ist ausreichend für den job.

    Hier ist ein polyfill für den nächsten() auf MDN. Hinweis: ein einzelner Aufruf von querySelectorAll()

    if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest = 
  function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
          i,
          el = this;
      do {
          i = matches.length;
          while (--i >= 0 && matches.item(i) !== el) {};
      } while ((i < 0) && (el = el.parentElement)); 
      return el;
  };
}

    Aber Bedenken Sie, dass die Funktion implementiert, wie dies wird nicht ordnungsgemäß auf dem angefügten Baum (losgelöst vom Dokument.documentElement root)

    //Element.prototype.closestTest = function(s){...as seen above...};

var detachedRoot = document.createElement("footer");
var child = detachedRoot.appendChild(document.createElement("div"));
detachedRoot.parentElement; //null

child.closestTest("footer"); //null

document.documentElement.append(detachedRoot);
child.closestTest("footer"); //<footer>

    Obwohl am nächsten (ist), dass die Implementierung in Firefox 51.0.1 scheint gut zu funktionieren mit getrennten Baum

    document.documentElement.removeChild(detachedRoot);
child.closestTest("footer"); //null
child.closest("footer"); //<footer>

    InformationsquelleAutor der Antwort Pavlo D

  2. 35

    Gebäude aus der Alnitak Antwort. Hier ist die Arbeit und aktuelle Umsetzung mit matchesSelector die jetzt matches im DOM spec.

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

    while (el) {
        if (matchesSelector.call(el, selector)) {
            break;
        }
        el = el.parentElement;
    }
    return el;
}

    Browser-Unterstützung ist groß: http://caniuse.com/matchesselector

    InformationsquelleAutor der Antwort Paul Irish

  3. 11

    Scheint wie Chrome 40 bringt eine native element.closest() Methode (http://blog.chromium.org/2014/12/chrome-40-beta-powerful-offline-and.html) hier angegeben: https://dom.spec.whatwg.org/#dom-element-closest

    InformationsquelleAutor der Antwort Jonathan Raoult

  4. 3

    Dieser klingt, wie es sollte Recht einfach sein, angesichts der matches - Funktion, aber das ist nicht allgemein unterstützt noch:

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

    Das Problem ist, das matches Funktion nicht richtig unterstützt. Da es noch ein relativ neues API verfügbar als webkitMatchesSelector im Chrome und Safari, und mozMatchesSelector im Firefox.

    InformationsquelleAutor der Antwort Alnitak

  5. 1

    Verwendung element.am nächsten() wir finden am Nächsten Vorfahren passenden Selektor. Diese Methode nimmt Selektoren-Liste als parameter und gibt die nächsten Vorfahren. Als pro Rob ' s Kommentar diese API wird von chrome 41 und FF 35.

    Wie bereits in den whatwg-Spezifikationen https://dom.spec.whatwg.org/#dom-element-closest

    Beispiel: im folgenden HTML zeigen Warnmeldung "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>

    InformationsquelleAutor der Antwort Paritosh

  6. 1

    Ein wenig Rekursion wird den trick tun.

    //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);
    };
})();

    InformationsquelleAutor der Antwort Finn Fitzsimons

Schreibe einen Kommentar