jQuery trouver quel parent est le plus proche?

Utilisez .parents(). Il renvoie une liste de tous les parents qui sont classés du plus proche au plus éloigné.

La différence entre utiliser ceci et utiliser .closest(selector) est qu'il accepte un objet jQuery au lieu d'une chaîne de sélection, qui doit être codée en dur. Pendant ce temps, les objets jQuery peuvent être des collections et peuvent donc être générés à la volée.

(function($) {
  $.fn.getClosest = function(testElements) {
    var element = $(this);
    var parents = element.parents();
    var indexClosest = Number.MAX_VALUE;
    testElements.each(function() {
      var index = parents.index($(this));
      if (index > -1 && index < indexClosest)
        indexClosest = index;
    });
    return parents.eq(indexClosest);
  };
})(jQuery);

Utilisez la fonction comme ceci:

$("a").getClosest($("table, ul"))

Violon avec cas d'utilisation avancée

J'aime la réponse de Fabian; mais pour mesurer réellement la distance, vous pouvez utiliser ceci:

var $parentsUntilTable = $('li').parentsUntil('table');
var $parentsUntilUl = $('li').parentsUntil('ul');
console.log($parentsUntilTable.length < $parentsUntilUl.length
           ? 'table is closer'
           : 'ul is closer');

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <ul>
        <li>
        </li>
      </ul>
    </td>
  </tr>
</table>

Un élément n'a qu'un seul nœud parent, au-dessus de ceux-ci se trouvent des nœuds ancêtres.

À partir d'ici: https://stackoverflow.com/a/15149590/1876047 - vous pouvez utiliser

$(elem1).offset().top - $(elem2).offset.().top

Étant donné que les deux nœuds sont les ancêtres de l'élément que vous envisagez, le plus éloigné de la racine de l'arborescence DOM est le placard de votre élément.

Donc, si la différence ci-dessus est supérieure à 0, alors elem2 est le plus proche, sinon elem1 est le plus proche.

Voici une implémentation simple de la méthode .closer() qui retourne le sélecteur le plus proche de l'élément donné:

$.fn.closer = function(varargs) {
  var $elem = $(this);
  while ($elem.length) {
    for (var i = 0, len = arguments.length; i < len; i++) {
      if ($elem.is(arguments[i])) {
        return arguments[i];
      }
    }
    $elem = $elem.parent();
  }
  return null;
};

Voyez-le en action sur jsFiddle.