jQuery“有父母”

Question

JQuery 的“has”方法有效地选择了它们具有特定后代的所有元素。

我想根据元素具有特定祖先的事实来选择元素。我知道 parent([selector]) 和 parents([selector]) 但这些选择父母而不是父母的孩子。

那么有没有相当于“有”的祖先？

注意：我已经有了一个元素的上下文，在层次结构的下方，我将基于此进行选择，因此我无法进行“自上而下”的查询。

更新

我显然在这里解释得很糟糕，所以我会试着澄清一下：

<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 对象。我想选择那些父元素为 class= x 的元素。

希望这更有意义。

Answer 1

对于一个干净的可重用解决方案，请考虑使用自定义方法扩展 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");

这会选择文档上的所有列表项，然后过滤到仅以.x 作为祖先的那些项。因为这在内部使用了 jQuery，所以你可以传入一个更复杂的选择器：

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

这会将集合过滤到来自.x 或.y 或两者的项目。

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

Answer 2

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

Answer 3

如果我正确理解您的问题，可以这样做：

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

Answer 4

$('body').hasParent('html') //true

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

#API：

// check if current element has parent element 'e' 
$.fn.hasParent = function (e) {
    return !!$(this).parents(e).length
}

Answer 5

你实际上可以直接使用filter（没有调用closest的函数），它会有更好的性能。只需使用匹配 .x 中包含的元素的选择器：

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

这也与其他人建议的closest 解决方案略有不同，因为如果元素本身具有给定的类，但只有当它在具有该类的元素时才会匹配。

如果还需要将元素与类匹配，则可以稍作修改：

$("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>

Answer 6

试试这个

ul.myList > li > a

这个选择器只选择列表元素的直接子元素的链接，它们是 反过来，具有 myList 类的元素的直接子元素。

Answer 7

object.each(function(){
    element = $(this);
    if(element.parent().hasClass("x")){
        //do stuff
    }
});

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

Answer 8

简单的方法是这样的：

// 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');

或者你真的需要比这更复杂的东西吗？

编辑：如果你已经有一个元素，你可以将它与 parent() 命令结合起来，如下所示：

myElement.parents('parentSelector').find('childSelector'); // Will include self

Answer 9

我意识到这是一个老问题，但我将这里留给未来寻找类似问题的访问者；

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

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

Answer 10

非常简单的方法

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