[英]JQuery - Find element that has a given number of siblings
I need to be able to search through each level of descendants of a JQuery object, and return any collections of siblings that may have a given number of members at that hierarchy level, starting with the objects most distant descendants, and working its way back up. 我需要能够搜索JQuery对象的每个后代,并返回在该层次结构级别上可能具有给定数目的成员的所有同级兄弟的集合,从最远的后代对象开始,然后进行备份。
So given some HTML: 因此,给出一些HTML:
<div class="search-me">
<div> <!-- DON'T FIND THIS -->
<p>FIND ME</p>
<p>FIND ME</p>
<p>FIND ME</p>
</div>
<div> <!-- DON'T FIND THIS -->
<span></span>
<span></span>
</div>
<div> <!-- DON'T FIND THIS -->
<div>FIND ME</div>
<div>FIND ME</div>
<div>FIND ME</div>
</div>
</div>
I need the following pseudo code, to return the items labelled 'FIND ME', and nothing else... 我需要以下伪代码,以返回标有“查找我”的项目,而无其他...
$('.search-me').findGroupWithSize(3);
Also, note that there are three div's containing the <p>
, <span>
, and <div>
tags, which should not be returned. 另外,请注意,有三个div包含<p>
, <span>
和<div>
标记,不应将其返回。 So it should return a collection of the lowest level set of elements, whose siblings total a given amount. 因此,它应返回一组最低级别的元素的集合,这些元素的同级元素总数为给定的数量。
The below example finds the groups of 3 from the HTML you posted. 下面的示例从您发布的HTML中查找3组。
var siblingsGroupTarget = 3; var foundIndex = 0; var elementArray = []; $(".search-me").find("*").each(function(index){ // Conditions var hasChilds = $(this).children().length; var hasSiblings = $(this).siblings().length; var itsSiblings = $(this).siblings(); var itsSiblingsHasChilds = itsSiblings.children().length; console.log( $(this)[0].tagName+": "+$(this).siblings().length ); if( hasChilds == 0 && ( hasSiblings == siblingsGroupTarget-1 && itsSiblingsHasChilds == 0 ) ){ elementArray.push( $(this) ); } }); elementArray.reverse(); for(i=0;i<elementArray.length;i++){ foundIndex++; elementArray[i].addClass("FOUND").append(" I was found #"+foundIndex); };
.FOUND{ border:3px solid red; width:12em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="search-me"> <div> <!-- DON'T FIND THIS --> <p>FIND ME</p> <p>FIND ME</p> <p>FIND ME</p> </div> <div> <!-- DON'T FIND THIS --> <span></span> <span></span> </div> <div> <!-- DON'T FIND THIS --> <div>FIND ME</div> <div>FIND ME</div> <div>FIND ME <ul> <!-- DON'T FIND THIS --> <li>FIND ME</li> <li>FIND ME</li> <li>FIND ME</li> </ul> </div> </div> </div>
You can use selector ".search-me > *"
passed to jQuery()
to get direct descendants of .search-me
element, .toArray()
to convert jQuery object to array, Array.prototype.reverse()
to reverse the collection of elements, .filter()
to check if the child elements .length
is N
, wrap array methods in jQuery()
with selector "> *"
to return child elements of matched elements 您可以使用传递给jQuery()
选择器".search-me > *"
来获取.search-me
元素的直接后代,使用.toArray()
将jQuery对象转换为数组,使用Array.prototype.reverse()
来反转集合的元素, .filter()
检查子元素.length
是否为N
,用选择器"> *"
将jQuery()
数组方法包装起来,以返回匹配元素的子元素
const N = 3; let res = $("> *", $(".search-me > *").toArray().reverse() .filter(function(el) {return $("> *", el).length === N})); console.log(res); res.css("color", "purple")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div class="search-me"> <div> <!-- DON'T FIND THIS --> <p>FIND ME</p> <p>FIND ME</p> <p>FIND ME</p> </div> <div> <!-- DON'T FIND THIS --> <span>DON'T FIND ME</span> <span>DON'T FIND ME</span> </div> <div> <!-- DON'T FIND THIS --> <div>FIND ME</div> <div>FIND ME</div> <div>FIND ME</div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.