blocks|key|242638|text|您可以将find与:first选择器一起使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|242639|$('#parent').find('p:first');|code-block|syntax|javascript|242640|上面的代码行将在#parent的后代中找到第一个元素。|242641|entityMap^0|4|4|9|6|0|0|8|7|O|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

You can use <code>find</code> with the <code>:first</code> selector:

<pre><code>$('#parent').find('p:first');
</code></pre>

The above line will find the first <code>&lt;p&gt;</code> element in the descendants of <code>#parent</code>.

blocks|key|2911882|text|如果你说的“最接近”的后代是指第一个孩子，那么你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2911883|$('#foo').find(':first');|code-block|syntax|javascript|2911884|或者：|2911885|$('#foo').children().first();|2911886|或者，要查找特定元素的第一个匹配项，您可以执行以下操作：|2911887|$('#foo').find('.whatever').first();|2911888|2911889|$('#foo').find('.whatever:first');|2911890|实际上，我们需要一个可靠的定义来定义“最接近的后代”是什么意思。|2911891|例如。|2911892|<div+id="foo">
++++
++++++++
++++
++++
</div>|2911893|$('#foo').closestDescendent('span')会返回哪个？|offset|length|style|CODE|2911894|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|Z|14|6|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|19|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|O|3|H|5|6|7|1B|8|@]|9|@]|A|$]]|$1|P|3|Q|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|R|3|S|5|6|7|1D|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1E|8|@]|9|@]|A|$]]|$1|V|3|W|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|X|3|Y|5|6|7|1G|8|@$Z|1H|10|1I|11|12]|$Z|1J|10|1K|11|12]]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|14|$]]

If by "closest" descendant you mean the first child then you can do:

<pre><code>$('#foo').find(':first');
</code></pre>

Or:

<pre><code>$('#foo').children().first();
</code></pre>

Or, to look for the first occurrence of a specific element, you could do:

<pre><code>$('#foo').find('.whatever').first();
</code></pre>

Or:

<pre><code>$('#foo').find('.whatever:first');
</code></pre>

Really though, we need a solid definition of what "closest descendant" means.

E.g.

<pre><code>&lt;div id="foo"&gt;
 &lt;p&gt;
 &lt;span&gt;&lt;/span&gt;
 &lt;/p&gt;
 &lt;span&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

Which <code>&lt;span&gt;</code> would <code>$('#foo').closestDescendent('span')</code> return?

blocks|key|2911901|text|我认为首先你必须定义“最接近”是什么意思。如果您指的是与您的条件匹配的子代节点，即父代链接距离最短，则使用":first“或".eq(0)”不一定有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2911902|<div+id='start'>
++<div>
++++<div>
++++++<span+class='target'>
++++</div>
++</div>
++<div>
++++<span+class='target'>
++</div>
</div>|code-block|syntax|javascript|2911903|在该示例中，第二个".target“元素”更接近“"start”<div>，因为它只有一个父跳。如果这就是你所说的“最近”，你需要在过滤函数中找到最小距离。来自jQuery选择器的结果列表始终是DOM顺序的。|offset|length|style|CODE|2911904|也许：|2911905|$.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;+%2B%2Bi)
++++++++if+($parents.get(i)+===+base)+break;
++++++if+(dist+===+null+%7C%7C+i+<+dist)+{
++++++++dist+=+i;
++++++++closest+=+this;
++++++}
++++});
++++rv.add(closest);
++});
++return+rv;
};|2911906|这是一种黑客插件，因为它构建结果对象的方式，但其想法是，您必须找到所有匹配的元素中最短的父路径。由于<检查，这段代码在DOM树中偏向左侧的元素；<=将偏向右侧。|2911907|entityMap^0|0|0|I|6|12|5|0|0|0|1E|1|20|2|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]|$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|13|8|@$I|14|J|15|K|L]|$I|16|J|17|K|L]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|T|$]]

I think that first you have to define what "closest" means. If you mean the descendant node matching your criteria that is the shortest distance away in terms of parental links, then using ":first" or ".eq(0)" won't necessarily work:

<pre><code>&lt;div id='start'&gt;
 &lt;div&gt;
 &lt;div&gt;
 &lt;span class='target'&gt;&lt;/span&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;span class='target'&gt;&lt;/span&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

In that example, the second ".target" <code>&lt;span&gt;</code> element is "closer" to the "start" <code>&lt;div&gt;</code>, because it's only one parental hop away. If that's what you mean by "closest", you'd need to find the minimum distance in a filter function. The result list from a jQuery selector is always in DOM order.

Maybe:

<pre><code>$.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 &lt; $parents.length; ++i)
 if ($parents.get(i) === base) break;
 if (dist === null || i &lt; dist) {
 dist = i;
 closest = this;
 }
 });
 rv.add(closest);
 });
 return rv;
};
</code></pre>

That's sort-of a hack plugin because of the way it builds the result object, but the idea is that you've got to find the shortest parental path out of all the matching elements you find. This code biases towards elements leftward in the DOM tree because of the <code>&lt;</code> check; <code>&lt;=</code> would bias rightwards.

blocks|key|239149|text|我想出了这个，还没有位置选择器的实现(它们需要的不仅仅是matchesSelector)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|239150|演示：http://jsfiddle.net/TL4Bq/3/|239151|(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+%7C%7C+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);|code-block|syntax|javascript|239152|虽然可能有一些bug，但并没有对其进行太多测试。|239153|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/TL4Bq/3/^0|S|F|0|3|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

I cooked up this, no implementation for positional selectors (they need more than just <code>matchesSelector</code>) yet:

Demo: <a href="http://jsfiddle.net/TL4Bq/3/" rel="nofollow">http://jsfiddle.net/TL4Bq/3/</a>

<pre><code>(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 &gt; 1 ? jQuery.unique(ret) : ret;
 return this.pushStack(ret, "closestDescendant", selector);
 };
})(jQuery);
</code></pre>

There is probably some bugs though, didn't test it very much.

blocks|key|241413|text|根据您对closest的定义，我编写了以下插件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|241414|(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);|code-block|syntax|javascript|241415|entityMap^0|4|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

According to your definition of <code>closest</code>, I've written the following plugin:

<pre><code>(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);
</code></pre>

blocks|key|241419|text|Rob+W的回答对我来说并不是很有效。我对它进行了调整，它确实起作用了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|241420|//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
}|code-block|syntax|javascript|241421|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Rob W's answer didn't quite work for me. I adapted it to this which did work.

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

blocks|key|3126278|text|如果目标与选择器匹配，我将使用以下代码来包含目标本身：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3126279|++++var+jTarget+=+$("#doo");
++++var+sel+=+'.pou';
++++var+jDom+=+jTarget.find(sel).addBack(sel).first();|code-block|syntax|javascript|3126280|标记：|3126281|<div+id="doo"+class="pou">
++++poo
++++<div+class="foo">foo</div>
++++<div+class="pou">pooo</div>
</div>|3126282|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I would use the following to include the target itself if it matches the selector:

<pre><code> var jTarget = $("#doo");
 var sel = '.pou';
 var jDom = jTarget.find(sel).addBack(sel).first();
</code></pre>

Markup:

<pre><code>&lt;div id="doo" class="pou"&gt;
 poo
 &lt;div class="foo"&gt;foo&lt;/div&gt;
 &lt;div class="pou"&gt;pooo&lt;/div&gt;
&lt;/div&gt;
</code></pre>

blocks|key|3126287|text|你有很多选择，但是$("#parent").children(".child");是最好的。check+this+article+for+details+and+benchmark|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3126288|entityMap|0|LINK|mutability|MUTABLE|url|http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/^0|9|W|1A|18|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

you have a lot of options, however <code>$("#parent").children(".child");</code> is the fastet.
<a href="http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/" rel="nofollow">check this article for details and benchmark</a>

blocks|key|3126416|text|尽管这是一个古老的话题，但我还是忍不住要实现我的closestChild。以最少的行程传递第一个找到的子代(呼吸优先)。一种是递归的(个人喜好)，另一种是使用待办事项列表，因此没有递归作为jQquery扩展。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3126417|希望有人能从中受益。|3126418|注意:递归得到堆栈溢出，我改进了另一个，现在类似于前面给出的答案。|3126419|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+$();
++++},

});++|code-block|syntax|javascript|3126420|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Even though it's an old topic I could not resist implementing my closestChild.
Delivers the first found descendant with least traveling ( breath first ). 
One is recursive (personal favorite ), other using a todo list so without recursion as jQquery extensions.

Hope someone benefits.

Note : The recursive gets stack overflow, and I improved the other, now simular to previous answer given.

<pre><code>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 &gt; 0 ) {
 var found = todo.filter( selector );
 if ( found.length &gt; 0 ) { // found closest: happy
 return found.first();
 } else {
 todo = todo.children();
 }
 }
 return $();
 },

}); 
</code></pre>

blocks|key|2912116|text|下面的插件返回第n个最接近的子代。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912117|$.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;
};|code-block|syntax|javascript|2912118|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The following plugin returns the nth closest descendants.

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

 recursiveMatch(children);

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

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

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

 return closestMatches;
};
</code></pre>

blocks|key|2912122|text|我正在寻找一个类似的解决方案(我想要所有最接近的后代，即广度优先%2B所有匹配，无论它存在哪个级别)，这是我最终要做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912123|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
});|code-block|syntax|javascript|2912124|我希望这能帮到你。|2912125|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I was looking for a similar solution (I wanted all closest descendants, i.e. breadth first + all matches regardless of which level it exists), here's what I ended up doing:

<pre><code>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
});
</code></pre>

I hope this helps.

blocks|key|242773|text|这种方法怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|242774|$('find-my-closest-descendant').find('>+div');|code-block|syntax|javascript|242775|这个“直接子”选择器适用于我。|242776|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

What about this approach?

<pre><code>$('find-my-closest-descendant').find('&gt; div');
</code></pre>

This "direct child" selector works for me.

blocks|key|2912164|text|如果有人正在寻找一个纯JS解决方案(使用ES6而不是jQuery)，下面是我使用的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912165|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;
};|code-block|syntax|javascript|2912166|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In case someone's looking for a pure JS solution (using ES6 instead of jQuery), here's the one I use:

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

blocks|key|2912168|text|你可以简单地说，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2912169|$("#find-my-closest-descendant").siblings('.closest:first');|code-block|syntax|javascript|2912170|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can just simply put,

<pre><code>$("#find-my-closest-descendant").siblings('.closest:first');
</code></pre>

blocks|key|239269|text|有一篇很好的文章指出，OP所需的东西可以通过面向极客的最接近的极客轻松实现|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239270|1https://www.geeksforgeeks.org/jquery-closest-with-examples/|offset|length|239271|entityMap|0|LINK|mutability|MUTABLE|url|https://www.geeksforgeeks.org/jquery-closest-with-examples/|1^0|0|0|1|0|1|1N|1|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]|$D|T|E|U|1|V]]|A|$]]|$1|F|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]|N|$5|I|J|K|A|$L|M]]]]

There is an excellent article that points out that what the OP requires can be achieved easily with closest [Geeks for Geeks] 
<a href="https://www.geeksforgeeks.org/jquery-closest-with-examples/" rel="nofollow noreferrer">1</a><a href="https://www.geeksforgeeks.org/jquery-closest-with-examples/" rel="nofollow noreferrer">https://www.geeksforgeeks.org/jquery-closest-with-examples/</a>

Is there a function similar to <code>jQuery</code> <code>.closest()</code> but for traversing descendants and returning only closest ones?

I know that there is <code>.find()</code> function, but it returns all possible matches, not closest.

Edit:

Here is definition of closest (at least for me):

In first place all childrens are traversed, then each individuals childrens are traversed.

In example given below <code>id='2'</code> is closest <code>.closest</code> descendants of <code>id="find-my-closest-descendant"</code>

<pre><code>&lt;div id="find-my-closest-descendant"&gt;
 &lt;div&gt;
 &lt;div class="closest" Id='1'&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="closest" Id='2'&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

Please see <a href="http://jsfiddle.net/manishtpatel/2gaLx/6/" rel="noreferrer">JSfiddle link</a>.

Similar to jQuery .closest() but traversing descendants?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

是否有类似于jQuery .closest()的函数，但用于遍历子节点并仅返回最近的子节点？我知道有.find()函数，但它返回所有可能的匹配，而不是最接近的匹配。编辑：这里是最接近的定义(至少对我来说)首先遍历所有的孩子，然后遍历每个单独的孩子。在下面给出的示例中，id='2'是id="find-my-closest...

问类似于jQuery .closest()，但遍历后代？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问类似于jQuery .closest()，但遍历后代？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问类似于jQuery .closest()，但遍历后代？
EN