10

当与子选择器一起使用时>，jQuery 的“has”的两个变体表现不同。

拿这个 HTML：

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

现在：

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

会返回它，而：

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

不会。它是错误还是功能？在这里比较：http: //jsfiddle.net/aC9dP/

编辑：这可能是一个错误或至少是未记录的不一致行为。

无论如何，我认为让子选择器始终作为一元运算符工作是有益的。它使您能够做一些原本需要自定义过滤器功能的事情——它允许您直接选择具有某些子元素的元素：

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

4

2 回答 2

7

发生这种情况是因为嘶嘶声选择器正在查看 :has 示例中所有具有跨度子项的 Div。但在 .has 示例中，它将所有 DIV 传递给 .has()，然后它会查找不应该是独立选择的内容。（“没有孩子”）。

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

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

嘶嘶声与目标嘶嘶声：

我一直在谈论v1.4.2 of jquery development release。

.has （jQuery 的第 3748 行）

描述：将匹配元素集减少为具有与选择器或 DOM 元素匹配的后代的元素。

代码：

    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），然后我们检查孩子。

:has (jQuery 的第 3129 行)

描述：选择至少包含一个与指定选择器匹配的元素的元素。

代码：

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

它们是两个不同的工具，:has 使用 100% 的嘶嘶声，而 .has 使用传递给它的目标。

注意：如果您认为这是一个错误，请填写错误票。

于 2010-10-15T18:13:05.453 回答
1

我认为您可能遇到了真正的错误。问题可能在于您使用子选择器的方式。正如 user257493 指出的那样，它并不意味着单独使用（或者至少我在文档中没有看到任何示例。

不过看看这个。如果*在 中的子选择器之前添加一个.has()，它会突然起作用：http: //jsfiddle.net/Ender/FjgZn/

但是如果你在:has()选择器中做同样的事情，它就会停止工作！见这里：http: //jsfiddle.net/Ender/FjgZn/

这两者的实施方式似乎肯定存在差异。

于 2010-10-15T18:50:54.453 回答