jQuery“hasParent”

JQuery“有”方法有效地select所有元素,他们有特定的后代。

我想根据他们有特定的祖先的事实来select元素。 我知道父母([select])和父母([select]),但这些select父母,而不是父母的孩子。

那么有没有一个相当于“有”的祖先呢?

注:我已经有一个元素的上下文,我将根据这个select,所以我不能做一个“自上而下”的查询。

更新

我在这里很明显地解释了自己,所以我会试着澄清一下:

<ul class="x"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="y"> <li>4</li> <li>5</li> <li>6</li> </ul> 

我有一个已经由元素2,3,4和5组成的jQuery对象。我想要select具有class = x的父元素的元素。

希望更有意义。

对于干净的可重用解决scheme,可以考虑使用自定义方法来扩展jQuery.fn对象,以确定给定元素的特定祖先的存在:

 // Extend jQuery.fn with our new method jQuery.extend( jQuery.fn, { // Name of our method & one argument (the parent selector) within: function( pSelector ) { // Returns a subset of items using jQuery.filter return this.filter(function(){ // Return truthy/falsey based on presence in parent return $(this).closest( pSelector ).length; }); } }); 

这导致了一个新的方法, $.fn.within ,我们可以用来过滤我们的结果:

 $("li").within(".x").css("background", "red"); 

这将select文档上的所有列表项,然后仅筛选具有.x作为祖先的列表项。 因为这在内部使用jQuery,所以可以传入更复杂的select器:

 $("li").within(".x, .y").css("background", "red"); 

这将过滤集合到从.x.y或两者下降的项目。

小提琴: http : //jsfiddle.net/jonathansampson/6GMN5/

如果我正确理解你的问题,这将做到:

 $.fn.hasAncestor = function(a) { return this.filter(function() { return !!$(this).closest(a).length; }); }; $('.element').hasAncestor('.container').myAction(); <div class="container"> <span> <strong class="element">strong</strong> </span> </div> 

if ( $('.foo').parents('.parentSelector').length ) { // has parent }

 $('body').hasParent('html') //true $('div#myDiv').hasParent($('body')) //true 

API:

 $.fn.hasParent=function(e){ return !$(this).parents(e).length } 

尝试这个

 ul.myList > li > a 

这个select器只select列表元素的直接子元素的链接,这些元素依次指向具有类myList的元素的子元素。

你可以直接使用filter (不需要调用closest的函数),它会有更好的性能。 只需使用匹配.x包含的元素的select器:

 $("li").filter(".x *") 

这与其他人提出的closest解决scheme略有不同,如果元素本身具有给定的类别,但只有具有该类别的元素才会匹配。

如果需要将元素与类匹配,则可以稍微修改:

 $("li").filter(".x, .x *") 
 $("li").filter(".x *").css("background", "red"); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="x"><li>1</li><li>2</li><li>3</li></ul> <ul class="y"><li>4</li><li>5</li><li>6</li></ul> 

简单的方法是这样的:

 // all children of a specific parent match $('parentSelector').children(); // All children matching a specific pattern, one level deep $('parentSelector > childSelector'); // or // $('parentSelector').children('childSelector'); // All children matching a specific pattern, multiple levels deep $('parentSelector childSelector'); // or // $('parentSelector').find('childSelector'); 

还是你真的需要比这更复杂的东西?

编辑:如果你已经有一个元素,你可以结合这个父()命令,如下所示:

 myElement.parents('parentSelector').find('childSelector'); // Will include self 
 object.each(function(){ element = $(this); if(element.parent().hasClass("x")){ //do stuff } }); 

这会影响对象中具有父级.x的每个项目

我意识到这是一个古老的问题,但我将这里留下来,为未来的访问者寻找类似的东西;

有一个$.contains(container, contained)方法返回一个布尔值。

https://api.jquery.com/jQuery.contains/

非常简单的方法来做到这一点

 $('.x').find('li')