JavaScript: Comment obtenir de l'élément parent par le sélecteur?

Exemple:

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

Je veux obtenir parent par certains sélecteur de inner élément div (dans l'exemple avec myDiv classe). Comment l'obtenir SANS jQuery, seulement JS?

Quelque chose comme: 

var div = document.getElementById('myDiv');
div.someParentFindMethod('some selector');
InformationsquelleAutor nkuhta | 2013-01-09
  1. 33

    Voici le plus de base 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);
    • C'est plutôt inefficace en ce qu'il récupère tous les éléments avec ce sélecteur dans l'ensemble du document, plutôt que de simplement la vérification de la mère.
    InformationsquelleAutor Chris
  2. 63

    Vous pouvez utiliser plus proche() dans les navigateurs modernes:

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

    Utilisation de la détection d'objet de fournir une polyfill ou méthode alternative pour assurer la compatibilité avec IE.

    InformationsquelleAutor George Kargakis
  3. 40

    Trouve le plus proche parent (ou de l'élément lui-même) qui correspond au sélecteur de donnée. Également inclus est un sélecteur pour arrêter la recherche, dans le cas où vous connaissez un ancêtre commun que vous devriez arrêter de chercher à.

    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;
}
    InformationsquelleAutor leech
  4. 3

    À l'aide de sangsue de réponse avec indexOf (pour soutenir IE)

    C'est à l'aide de ce sangsue parlé, mais le faire fonctionner pour IE (IE ne prend pas en charge les matchs):

    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;
}

    Il n'est pas parfait, mais il fonctionne si le sélecteur est assez unique afin de ne pas accidentellement correspondre à l'élément incorrect.

    InformationsquelleAutor Trevor Nestman
  5. 2

    Voici une solution récursive:

    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)
}
    InformationsquelleAutor Cully
  6. 0

    exemple simple d'une fonction parent_by_selector qui de retour d'un parent ou null (pas de sélecteur de matchs):

    function parent_by_selector(node, selector, stop_selector = 'body') {
  var parent = node.parentNode;
  while (true) {
    if (parent.matches(stop_selector)) break;
    if (parent.matches(selector)) break;
    parent = parent.parentNode; //get upper parent and check again
  }
  if (parent.matches(stop_selector)) parent = null; //when parent is a tag 'body' -> parent not found
  return parent;
};
    InformationsquelleAutor Sergio Belevskij
  7. -5

    Ici est simple moyen d'accès parent id

    document.getElementById("child1").parentNode;

    va faire de la magie pour vous d'accéder à la div parent.

    <html>
<head>
</head>
<body id="body">
<script>
function alertAncestorsUntilID() {
var a = document.getElementById("child").parentNode;
alert(a.id);
}
</script>
<div id="master">
Master
<div id="child">Child</div>
</div>
<script>
alertAncestorsUntilID();
</script>
</body>
</html>
    • Il veut que le parent avec un peu de classe, et pas seulement le parent.
    • C'est la Question de l'OP "JavaScript: Comment obtenir de l'élément parent par le sélecteur?" il ne fait pas mention de la Classe
    • Sélecteur pourrait également être une classe ou un attribut et ainsi de suite
    InformationsquelleAutor ameya rote