JavaScript: Wie erhalte ich ein übergeordnetes Element durch einen Selektor?

Beispiel:

<div someAttr="parentDiv. We need to get it from child.">
    <table>
        ...
        <td> <div id="myDiv"></div> </td>
        ...
    </table>
</div>

Ich möchte das übergeordnete Element durch einen Selektor aus dem inneren div-Element (dem mit der myDiv Klasse).

Wie erreiche ich das mit einfachem JavaScript, ohne jQuery?

Etwas wie:

var div = document.getElementById('myDiv');
div.someParentFindMethod('some selector');

Sie dürfen verwenden closest() in modernen Browsern:

var div = document.querySelector('div#myDiv');
div.closest('div[someAtrr]');

Verwenden Sie die Objekterkennung, um a Polyfill oder alternative Methode für die Abwärtskompatibilität mit IE.

Hier ist die einfachste Version:

function collectionHas(a, b) { //helper function (see below)
    for(var i = 0, len = a.length; i < len; i ++) {
        if(a[i] == b) return true;
    }
    return false;
}
function findParentBySelector(elm, selector) {
    var all = document.querySelectorAll(selector);
    var cur = elm.parentNode;
    while(cur && !collectionHas(all, cur)) { //keep going up until you find a match
        cur = cur.parentNode; //go up
    }
    return cur; //will return null if not found
}

var yourElm = document.getElementById("yourElm"); //div in your original code
var selector = ".yes";
var parent = findParentBySelector(yourElm, selector);

Findet das nächste übergeordnete Element (oder das Element selbst), das mit dem angegebenen Selektor übereinstimmt. Ebenfalls enthalten ist ein Selektor zum Beenden der Suche, falls Sie einen gemeinsamen Vorfahren kennen, bei dem Sie die Suche beenden sollten.

function closest(el, selector, stopSelector) {
  var retval = null;
  while (el) {
    if (el.matches(selector)) {
      retval = el;
      break
    } else if (stopSelector && el.matches(stopSelector)) {
      break
    }
    el = el.parentElement;
  }
  return retval;
}

Verwenden der Antwort von Leech mit indexOf (zur Unterstützung von IE)

Dies verwendet das, worüber Blutegel gesprochen hat, aber damit es für IE funktioniert (IE unterstützt keine Übereinstimmungen):

function closest(el, selector, stopSelector) {
  var retval = null;
  while (el) {
    if (el.className.indexOf(selector) > -1) {
      retval = el;
      break
    } else if (stopSelector && el.className.indexOf(stopSelector) > -1) {
      break
    }
    el = el.parentElement;
  }
  return retval;
}

Es ist nicht perfekt, aber es funktioniert, wenn der Selektor eindeutig genug ist, damit er nicht versehentlich mit dem falschen Element übereinstimmt.

Durch die Nutzung querySelector() und am nächsten () Methoden ist es möglich, das übergeordnete Element zu erhalten.

• querySelector() gibt das erste Element zurück, das mit einem oder mehreren angegebenen CSS-Selektoren im Dokument übereinstimmt.

• closest() durchsucht den DOM-Baum nach dem nächsten Element, das mit einem angegebenen CSS-Selektor übereinstimmt.

Anwendungsbeispiel

var element = document.querySelector('td');
console.log(element.closest('div'));

<div>
  <table>
    <tr>
      <td></td>
    </tr>
  </table>
</div>

Falls Sie mehr als ein Element auswählen müssen, querySelectorAll() ist eine gute Passform.

• querySelectorAll() gibt alle Elemente im Dokument, die mit einem oder mehreren angegebenen CSS-Selektoren übereinstimmen, als statisches NodeList-Objekt zurück.

Um das gewünschte Element auszuwählen, muss es im Inneren angegeben werden [] so wäre zum Beispiel für das zweite Element: element[1]

Im folgenden Beispiel closest() -Methode wird verwendet, um das übergeordnete Element zu erhalten <tr> Element eines bestimmten ausgewählten Elements.

var element = document.querySelectorAll('td');
console.log(element[1].closest('tr'));

<div>
  <table>
    <tr id="1">
      <td> First text </td>
    </tr>
    <tr id="2">
      <td> Second text </td>
    </tr>
  </table>
</div>

Hier ist eine rekursive Lösung:

function closest(el, selector, stopSelector) {
  if(!el || !el.parentElement) return null
  else if(stopSelector && el.parentElement.matches(stopSelector)) return null
  else if(el.parentElement.matches(selector)) return el.parentElement
  else return closest(el.parentElement, selector, stopSelector)
}

Ich dachte, ich würde ein viel robusteres Beispiel liefern, auch in Typoskript, aber es wäre einfach, es in reines Javascript umzuwandeln. Diese Funktion fragt Eltern ab, indem sie entweder die ID wie “#my-element” oder die Klasse “.my-class” verwendet und im Gegensatz zu einigen dieser Antworten mehrere Klassen verarbeitet. Ich habe festgestellt, dass ich einige ähnlich benannt habe und die obigen Beispiele die falschen Dinge gefunden haben.

function queryParentElement(el:HTMLElement | null, selector:string) {
    let isIDSelector = selector.indexOf("#") === 0
    if (selector.indexOf('.') === 0 || selector.indexOf('#') === 0) {
        selector = selector.slice(1)
    }
    while (el) {
        if (isIDSelector) {
            if (el.id === selector) {
                return el
            }
        }
        else if (el.classList.contains(selector)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}

So wählen Sie nach Klassennamen aus:

let elementByClassName = queryParentElement(someElement,".my-class")

So wählen Sie nach ID aus:

let elementByID = queryParentElement(someElement,"#my-element")