Ähnlich wie jQuery .closest (), aber Nachkommen durchlaufen?

Gibt es eine ähnliche Funktion wie das jQuery .closest()Durchqueren von Nachkommen und das Zurückgeben nur der nächsten?

Ich weiß, dass es eine .find()Funktion gibt, aber sie gibt alle möglichen Übereinstimmungen zurück, nicht die nächsten.

Bearbeiten:

Hier ist die Definition von am nächsten (zumindest für mich) :

Zuerst werden alle Kinder durchquert, dann werden die einzelnen Kinder durchquert.

In dem unten angegebenen Beispiel sind die id='2'nächsten .closestNachkommen vonid="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>

Bitte beachten Sie den JSfiddle-Link .

Gemäß Ihrer Definition von closesthabe ich das folgende Plugin geschrieben:

(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);

Wenn Sie mit "nächstgelegenem" Nachkommen das erste Kind meinen, können Sie Folgendes tun:

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

Oder:

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

Um nach dem ersten Auftreten eines bestimmten Elements zu suchen, können Sie Folgendes tun:

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

Oder:

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

Wirklich, wir brauchen eine solide Definition dessen, was "nächster Nachkomme" bedeutet.

Z.B

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

Welches <span>würde $('#foo').closestDescendent('span')zurückkehren?

Sie können findmit dem :firstSelektor verwenden:

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

In der obigen Zeile finden Sie das erste <p>Element in den Nachkommen von #parent.

Was ist mit diesem Ansatz?

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

Dieser "Direktkind" -Selektor funktioniert für mich.

Reine JS-Lösung (mit 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;
}

Beispiel

Betrachtet man die folgende Struktur:

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>

Für den Fall, dass jemand nach einer reinen JS-Lösung sucht (mit ES6 anstelle von jQuery), verwende ich Folgendes:

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

Ich denke, dass man zuerst definieren muss, was "am nächsten" bedeutet. Wenn Sie meinen, dass der Nachkommenknoten Ihren Kriterien entspricht und in Bezug auf die elterlichen Verbindungen die kürzeste Entfernung entfernt ist, funktioniert die Verwendung von ": first" oder ".eq (0)" nicht unbedingt:

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

In diesem Beispiel ist das zweite ".target" <span>-Element "näher" am "Start" <div>, da es nur einen elterlichen Sprung entfernt ist. Wenn Sie das mit "am nächsten" meinen, müssen Sie den Mindestabstand in einer Filterfunktion ermitteln. Die Ergebnisliste eines jQuery-Selektors befindet sich immer in DOM-Reihenfolge.

Vielleicht:

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

Das ist eine Art Hack-Plugin, weil es das Ergebnisobjekt erstellt, aber die Idee ist, dass Sie aus allen übereinstimmenden Elementen, die Sie finden, den kürzesten elterlichen Pfad finden müssen. Dieser Code wird aufgrund der <Prüfung in Richtung der Elemente im DOM-Baum nach links verschoben. <=würde nach rechts voreingenommen sein.

Ich habe mir das ausgedacht, noch keine Implementierung für Positionsselektoren (sie brauchen mehr als nur matchesSelector):

Demo: 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);

Es gibt wahrscheinlich einige Fehler, die nicht sehr oft getestet wurden.

Rob Ws Antwort hat bei mir nicht ganz funktioniert. Ich habe es daran angepasst, was funktioniert hat.

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

Ich würde Folgendes verwenden, um das Ziel selbst einzuschließen, wenn es mit dem Selektor übereinstimmt:

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

Markup:

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

Obwohl es ein altes Thema ist, konnte ich nicht widerstehen, mein engstes Kind zu implementieren. Liefert den ersten gefundenen Nachkommen mit der geringsten Reise (Atem zuerst). Einer ist rekursiv (persönlicher Favorit), der andere verwendet eine Aufgabenliste, also ohne Rekursion als jQquery-Erweiterungen.

Hoffe, jemand profitiert.

Hinweis: Die Rekursive wird gestapelt, und ich habe die andere verbessert, die jetzt der vorherigen Antwort ähnelt.

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 $();
    },

});  

Das folgende Plugin gibt die n-ten nächsten Nachkommen zurück.

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

Ich suchte nach einer ähnlichen Lösung (ich wollte alle engsten Nachkommen, dh zuerst die Breite + alle Übereinstimmungen, unabhängig davon, welches Level es gibt). Am Ende habe ich Folgendes getan:

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

Ich hoffe das hilft.

Sie können einfach sagen,

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

Es gibt einen ausgezeichneten Artikel, der darauf hinweist, dass das, was das OP erfordert, leicht mit den engsten [Geeks for Geeks]
1 erreicht werden kann. 1 https://www.geeksforgeeks.org/jquery-closest-with-examples/

Sie haben viele Möglichkeiten, aber $("#parent").children(".child");das Fastet ist. Überprüfen Sie diesen Artikel für Details und Benchmark