jQuery:.has()和:has()之间的细微差别

问题描述

与子选择器>一起使用时，jQuery的具有"的两个变体的行为不同.

When used with the child selector >, the two variants of jQuery's "has" behave differently.

使用此HTML:

<div>
  <span>Text</span>
</div>

现在:

$("div:has(>span)");

将返回它，而:

$("div").has(">span");

不会.它是错误还是功能?在此处进行比较: http://jsfiddle.net/aC9dP/

would not. Is it a bug or a feature? Compare here: http://jsfiddle.net/aC9dP/

编辑:这可能是错误，或者至少是未记录的不一致行为.

This may be a bug or at least undocumented inconsistent behavior.

无论如何，我认为让子选择器一致地作为一元运算符来工作将是有益的.它使您能够执行原本需要自定义过滤器功能的操作-它使您可以直接选择具有某些子项的元素:

Anyway, I think it would be beneficial to have the child selector consistently work as an unary operator. It enables you to do something that otherwise would require a custom filter function — it lets you directly select elements that have certain children:

$("ul:has(>li.active)").show();     // works
$("ul").has(">li.active)").show();  // doesn't work, but IMHO it should

相对于:

$("ul").filter(function () {
  return $(this).children("li.active").length > 0;
}).show();

我为此打开了一张jQuery票证(7205).

推荐答案

之所以会发生这种情况，是因为嘶嘶声选择器正在:has示例中查看所有具有span子级的Div.但是在.has示例中，它将所有DIV传递给.has()，然后该.has()查找不应该是独立选择的内容. (拥有一无所有的孩子").

This happens because the sizzle selector is looking at all Div's that have span children in the :has example. But in the .has example, it's passing all DIV's to the .has(), which then looks for something that shouldn't be a stand-alone selection. ("Has children of nothing").

基本上，:has()是选择的一部分，但是.has()会传递这些div，然后从它们中重新选择.

Basically, :has() is part of the selection, but .has() gets passed those divs and then re-selects from them.

理想情况下，您不要使用这样的选择器.选择器中的>可能是一个错误，因为它在语义上很尴尬.注意:子运算符并不意味着是独立的.

Ideally, you don't use selectors like this. The > being in the selector is probably a bug, as it's semantically awkward. Note: the child operator isn't meant to be stand-alone.

我一直在谈论 jquery开发版本的v1.4.2 .

描述:将匹配元素的集合简化为具有后代的元素，.这些元素与选择器或DOM元素相匹配.

Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

代码:

    var targets = jQuery( target );
    return this.filter(function() {
        for ( var i = 0, l = targets.length; i < l; i++ ) {
            if ( jQuery.contains( this, targets[i] ) ) { //Calls line 3642
                return true;
            }
        }
    });

第3642行与2008年的插件 compareDocumentPosition 相关，但重要的是我们现在基本上只在这里运行两个jquery查询，第一个选择$("DIV")，下一个选择$(">span")(返回null)，然后我们检查子级.

Line 3642 relates to a 2008 plugin compareDocumentPosition, but the important bit here is that we're now basically just running two jquery queries here, where the first one selects $("DIV") and the next one selects $(">span") (which returns null), then we check for children.

说明:选择元素包含至少一个与指定选择器匹配的元素.

代码:

return !!Sizzle( match[3], elem ).length;

这是两个不同的工具::has使用sizzle 100％，. has使用传递给它的目标.

They are two differnt tools, the :has uses sizzle 100%, and .has uses targets passed to it.

注意:如果您认为这是一个错误，请填写该错误单.

这篇关于jQuery:.has()和:has()之间的细微差别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！