Similaire à jQuery .closest () mais traversant les descendants?

Existe-t-il une fonction similaire à jQuery .closest()mais pour parcourir les descendants et ne renvoyer que les plus proches?

Je sais qu'il y a une .find()fonction, mais elle renvoie toutes les correspondances possibles, pas les plus proches.

Éditer:

Voici la définition du plus proche (du moins pour moi) :

En premier lieu, tous les enfants sont traversés, puis chaque enfant individuel est traversé.

Dans l'exemple ci id='2'- dessous, les .closestdescendants les plus proches deid="find-my-closest-descendant"

<div id="find-my-closest-descendant">
    <div>
        <div class="closest" Id='1'></div>
    </div>
    <div class="closest" Id='2'></div>
</div>

Veuillez consulter le lien JSfiddle .

Selon votre définition de closest, j'ai écrit le plugin suivant:

(function($) {
    $.fn.closest_descendent = function(filter) {
        var $found = $(),
            $currentSet = this; // Current place
        while ($currentSet.length) {
            $found = $currentSet.filter(filter);
            if ($found.length) break;  // At least one match: break loop
            // Get all children of the current set
            $currentSet = $currentSet.children();
        }
        return $found.first(); // Return first match of the collection
    }    
})(jQuery);

Si par descendant "le plus proche" vous entendez le premier enfant, vous pouvez faire:

$('#foo').find(':first');

Ou:

$('#foo').children().first();

Ou, pour rechercher la première occurrence d'un élément spécifique, vous pouvez faire:

$('#foo').find('.whatever').first();

Ou:

$('#foo').find('.whatever:first');

En réalité, nous avons besoin d'une définition solide de ce que signifie «descendant le plus proche».

Par exemple

<div id="foo">
    <p>
        <span></span>
    </p>
    <span></span>
</div>

Ce qui <span>serait de $('#foo').closestDescendent('span')retour?

Vous pouvez utiliser findavec le :firstsélecteur:

$('#parent').find('p:first');

La ligne ci-dessus trouvera le premier <p>élément dans les descendants de #parent.

Et cette approche?

$('find-my-closest-descendant').find('> div');

Ce sélecteur "enfant direct" fonctionne pour moi.

Solution Pure JS (utilisant ES6).

export function closestDescendant(root, selector) {
  const elements = [root];
  let e;
  do { e = elements.shift(); } while (!e.matches(selector) && elements.push(...e.children));
  return e.matches(selector) ? e : null;
}

Exemple

Compte tenu de la structure suivante:

div == 0 $
├── div == 1 $
│ ├── div
│ ├── div.findme == 4 $
│ ├── div
│ └── div
├── div.findme == 2 $
│ ├── div
│ └── div
└── div == 3 $
    ├── div
    ├── div
    └── div

closestDescendant($0, '.findme') === $2;
closestDescendant($1, '.findme') === $4;
closestDescendant($2, '.findme') === $2;
closestDescendant($3, '.findme') === null;

function closestDescendant(root, selector) {
  const elements = [root];
  let e;
  do { e = elements.shift(); } while (!e.matches(selector) && elements.push(...e.children));
  return e.matches(selector) ? e : null;
}

const [$0, $1, $2, $3, $4] = [0, 1, 2, 3, 4].map(x => document.querySelector(`#e${x}`));

console.log(closestDescendant($0, '.findme')); // $2
console.log(closestDescendant($1, '.findme')); // $4
console.log(closestDescendant($2, '.findme')); // $2
console.log(closestDescendant($3, '.findme')); // null

<div id="e0">
    <div id="e1">
        <div></div>
        <div id="e4" class="findme"></div>
        <div></div>
        <div></div>
    </div>
    <div id="e2" class="findme">
        <div></div>
        <div></div>
    </div>
    <div id="e3">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Au cas où quelqu'un recherche une solution JS pure (en utilisant ES6 au lieu de jQuery), voici celle que j'utilise:

Element.prototype.QuerySelector_BreadthFirst = function(selector) {
    let currentLayerElements = [...this.childNodes];
    while (currentLayerElements.length) {
        let firstMatchInLayer = currentLayerElements.find(a=>a.matches && a.matches(selector));
        if (firstMatchInLayer) return firstMatchInLayer;
        currentLayerElements = currentLayerElements.reduce((acc, item)=>acc.concat([...item.childNodes]), []);
    }
    return null;
};

Je pense que vous devez d'abord définir ce que signifie «le plus proche». Si vous voulez dire le nœud descendant correspondant à vos critères qui est la distance la plus courte en termes de liens parentaux, alors utiliser ": first" ou ".eq (0)" ne fonctionnera pas nécessairement:

<div id='start'>
  <div>
    <div>
      <span class='target'></span>
    </div>
  </div>
  <div>
    <span class='target'></span>
  </div>
</div>

Dans cet exemple, le deuxième <span>élément ".target" est "plus proche" du "début" <div>, car il n'est qu'à un saut parental. Si c'est ce que vous entendez par «le plus proche», vous devez trouver la distance minimale dans une fonction de filtre. La liste de résultats d'un sélecteur jQuery est toujours dans l'ordre DOM.

Peut être:

$.fn.closestDescendant = function(sel) {
  var rv = $();
  this.each(function() {
    var base = this, $base = $(base), $found = $base.find(sel);
    var dist = null, closest = null;
    $found.each(function() {
      var $parents = $(this).parents();
      for (var i = 0; i < $parents.length; ++i)
        if ($parents.get(i) === base) break;
      if (dist === null || i < dist) {
        dist = i;
        closest = this;
      }
    });
    rv.add(closest);
  });
  return rv;
};

C'est une sorte de plugin de piratage en raison de la façon dont il construit l'objet de résultat, mais l'idée est que vous devez trouver le chemin parental le plus court parmi tous les éléments correspondants que vous trouvez. Ce code fait un biais vers les éléments vers la gauche dans l'arborescence DOM à cause de la <vérification; <=serait biaisé à droite.

J'ai concocté ceci, pas d'implémentation pour les sélecteurs de position (ils ont besoin de plus que juste matchesSelector) pour le moment:

Démo: http://jsfiddle.net/TL4Bq/3/

(function ($) {
    var matchesSelector = jQuery.find.matchesSelector;
    $.fn.closestDescendant = function (selector) {
        var queue, open, cur, ret = [];
        this.each(function () {
            queue = [this];
            open = [];
            while (queue.length) {
                cur = queue.shift();
                if (!cur || cur.nodeType !== 1) {
                    continue;
                }
                if (matchesSelector(cur, selector)) {
                    ret.push(cur);
                    return;
                }
                open.unshift.apply(open, $(cur).children().toArray());
                if (!queue.length) {
                    queue.unshift.apply(queue, open);
                    open = [];
                }
            }
        });
        ret = ret.length > 1 ? jQuery.unique(ret) : ret;
        return this.pushStack(ret, "closestDescendant", selector);
    };
})(jQuery);

Il y a probablement quelques bugs cependant, je ne l'ai pas beaucoup testé.

La réponse de Rob W n'a pas vraiment fonctionné pour moi. Je l'ai adapté à cela qui a fonctionné.

//closest_descendent plugin
$.fn.closest_descendent = function(filter) {
    var found = [];

    //go through every matched element that is a child of the target element
    $(this).find(filter).each(function(){
        //when a match is found, add it to the list
        found.push($(this));
    });

    return found[0]; // Return first match in the list
}

J'utiliserais ce qui suit pour inclure la cible elle-même si elle correspond au sélecteur:

    var jTarget = $("#doo");
    var sel = '.pou';
    var jDom = jTarget.find(sel).addBack(sel).first();

Balisage:

<div id="doo" class="pou">
    poo
    <div class="foo">foo</div>
    <div class="pou">pooo</div>
</div>

Même si c'est un vieux sujet, je n'ai pas pu résister à l'implémentation de mon enfant le plus proche. Fournit le premier descendant trouvé avec le moins de déplacements (souffle d'abord). L'un est récursif (favori personnel), l'autre utilise une liste de tâches donc sans récursivité comme extensions jQquery.

J'espère que quelqu'un en profitera.

Remarque: le récursif obtient un débordement de pile, et j'ai amélioré l'autre, maintenant similaire à la réponse précédente donnée.

jQuery.fn.extend( {

    closestChild_err : function( selector ) { // recursive, stack overflow when not found
        var found = this.children( selector ).first();
        if ( found.length == 0 ) {
            found = this.children().closestChild( selector ).first(); // check all children
        }
        return found;
    },

    closestChild : function( selector ) {
        var todo = this.children(); // start whith children, excluding this
        while ( todo.length > 0 ) {
            var found = todo.filter( selector );
            if ( found.length > 0 ) { // found closest: happy
                return found.first();
            } else {
                todo = todo.children();
            }
        }
        return $();
    },

});  

Le plugin suivant renvoie le nième descendant le plus proche.

$.fn.getNthClosestDescendants = function(n, type) {
  var closestMatches = [];
  var children = this.children();

  recursiveMatch(children);

  function recursiveMatch(children) {
    var matches = children.filter(type);

    if (
      matches.length &&
      closestMatches.length < n
    ) {
      var neededMatches = n - closestMatches.length;
      var matchesToAdd = matches.slice(0, neededMatches);
      matchesToAdd.each(function() {
        closestMatches.push(this);
      });
    }

    if (closestMatches.length < n) {
      var newChildren = children.children();
      recursiveMatch(newChildren);
    }
  }

  return closestMatches;
};

Je cherchais une solution similaire (je voulais tous les descendants les plus proches, c'est-à-dire la largeur en premier + toutes les correspondances quel que soit le niveau auquel elle existe), voici ce que j'ai fini par faire:

var item = $('#find-my-closest-descendant');
item.find(".matching-descendant").filter(function () {
    var $this = $(this);
    return $this.parent().closest("#find-my-closest-descendant").is(item);
}).each(function () {
    // Do what you want here
});

J'espère que ça aide.

Vous pouvez simplement dire,

$("#find-my-closest-descendant").siblings('.closest:first');

Il y a un excellent article qui souligne que ce que l'OP exige peut être réalisé facilement avec le plus proche [Geeks for Geeks]
1 https://www.geeksforgeeks.org/jquery-closest-with-examples/

vous avez beaucoup d'options, mais $("#parent").children(".child");le fastet. consultez cet article pour plus de détails et de référence