Solution DOM / pure JavaScript pour l'implémentation de jQuery.closest ()?

Voici le balisage, je suis en train de requête. Donc, compte tenu de la balise:

<table class="non-unique-identifier table">
<tr><td><div id="unique-identifier"></div></td></tr>
</table>

Je suis d'interrogation pour #unique identificateur:

var myDiv = document.getElementById('#unique-identifier');

Je suis d'essayer ensuite de sélectionner la table. Le problème est que je veux faire le code non fragiles donc je n'ai pas besoin de le faire:

var myDiv = document.getElementById('#unique-identifier'),
    myTable = myDiv.parentNode.parentNode.parentNode.parentNode;

Ma question

Est-il actuellement un DOM de la mise en œuvre de l'jQuery équivalent de $().plus proche (le) ? Le plus proche de la mise en œuvre efficace sans boucles for imbriquées serait préférable.

Limitations

Je suis tenu de ne pas utiliser jQuery ou grésillement pour ce problème particulier ou d'introduire de nouvelles bibliothèques. Le code est assez ancien. Ainsi, c'est la raison de ces limitations et de l'existence de <tables>.

source d'informationauteur chrisjlee

  1. 2

    Alternative est une fonction récursive. C'est un peu différent de la plus proche que je recherche les enfants, je ne sais pas si le plus proche.

    function closest(elem) {
    if( elem.className.indexOf("non-unique-identifier") ) {
        return elem;
    } 

    var parent = elem.parentNode;

    for(var i = 0; i< parent.children.length; i++ ) {
        if( parent.children[i].className.indexOf("non-unique-identifier")!=-1)  {
            return parent.children[i];
        }
    }

    return closest(parent);
}



var elem = document.getElementById('unique-identifier');

var cl = closest(elem);

console.log(cl);

    Non dans la recherche d'enfants exemple (le plus proche):

    function closest(elem) {
    if( elem.className.indexOf("non-unique-identifier") ) {
        return elem;
    } 

    var parent = elem.parentNode;

    if( parent.className.indexOf("non-unique-identifier")!=-1) {
        return parent;
    }    

    return closest(parent);
}



var elem = document.getElementById('unique-identifier');

var cl = closest(elem);

console.log(cl);
  2. 2

    Concis et rapide (testé avec Benchmark.js) pour la recherche l'élément le plus proche par un sélecteur css:

    var ep = Element.prototype;
ep.matches = ep.matches || ep.webkitMatchesSelector || ep.msMatchesSelector || ep.mozMatchesSelector;

function getClosest( elem, selector ) {
    while (elem !== document.body) {
        elem = elem.parentElement;
        if (elem.matches(selector)) return elem;
    }
}

    Prend en charge IE9+ et le reste des navigateurs, vous pouvez vous attendre à des soins.

  3. 2
    <div class="item">
  <div class="itemed">
    <p>Hello <b class="itemed" id="world">World</b></p>
  </div>
</div>

function closest(el, classname) {
   if(el.parentNode){
        if(el.parentNode.className.includes(classname)){
        return el.parentNode;
      }
      else{
        return closest(el.parentNode, classname);
      }
   }
   else{
    return false;
   }
}

var world = document.getElementById('world');
var closest = closest(world, 'item');
console.log(closest);
  4. 1

    J'ai écrit cette simple fonction dans l'un de mes Tapuscrit projets, j'ai donc utilisé querySelector sur parentNode de sorte que vous pouvez passer à la fonction classidtag name etc

    findParentNode(el, selector:string):Element | null {
  let found = null;
  let child = el;
  let childSelector = guessSelector(child);

  while(child !== document && found === null) {
    child = child.parentNode;
    childSelector = guessSelector(child);
    found = childSelector ? child.parentNode.querySelector(`${childSelector} > ${selector}`) : null;
  }

  return found;

  function guessSelector(child:any):string {
    childSelector = child.className ? `.${child.className.replace(' ', '.')}` : null;

    if (typeof child.getAttribute === 'function') {
      childSelector = !childSelector ?
        (child.getAttribute('id') ? `#${child.getAttribute('id')}` : null) : childSelector;

      childSelector = !childSelector ?
        child.tagName.toLowerCase() : childSelector;
    }

    return childSelector;
  }
}

    Exemple:

    Si vous voulez trouver le plus proche parent de target qui a .param-input classe, vous pouvez le faire comme ceci:

    document.body.addEventListener('click', (e) => {
  console.log(findParentNode(e.target, '.param-input'));
});
  5. 1

    Pour ajouter une mise à jour de réponse, il est maintenant Element.closest(<query_selector>) disponibles.

    https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

    Ce n'est pas pris en charge sur IE, mais que mozilla doc page contient du code pour un polyfill pour IE8 et IE9+.