10

子セレクター>で使用すると、jQuery の「has」の 2 つのバリアントは異なる動作をします。

次の 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

これは、sizzle セレクターが :has の例でスパンの子を持つすべての Div を見ているために発生します。しかし、.has の例では、すべての DIV を .has() に渡しています。これは、スタンドアロンの選択であってはならないものを探します。（「何もない子供がいます」）。

基本的に、:has() は選択の一部ですが、.has() はそれらの div を渡され、それらから再選択されます。

理想的には、このようなセレクターは使用しません。セレクターにある > は、意味的に扱いにくいため、おそらくバグです。注: 子オペレーターはスタンドアロンであることを意図していません。

シズル vs target.sizzle:

私はいつもjquery development release の v1.4.2について話しています。

.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に関連していますが、ここで重要なのは、基本的にここで 2 つの jquery クエリを実行しているだけで、最初のクエリが選択$("DIV")され、次のクエリが選択$(">span")され (null を返す)、子をチェックすることです。

:has (jQueryの3129行目)

説明:指定されたセレクターに一致する要素を少なくとも 1 つ含む要素を選択します。

コード：

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

これらは 2 つの異なるツールであり、:has はシズルを 100% 使用し、.has は渡されたターゲットを使用します。

注: これがバグだと思われる場合は、バグ チケットに記入してください。

于 2010-10-15T18:13:05.453 に答える
1

本物のバグに遭遇した可能性があると思います。問題は、子セレクターの使用方法にある可能性があります。user257493 が指摘したように、単独で使用することを意図したものではありません (または、少なくともドキュメントにその例はありません。

ただし、これを確認してください。*の子セレクターの前にa を追加する.has()と、突然動作します: http://jsfiddle.net/Ender/FjgZn/

:has()しかし、セレクターで同じことをすると、機能しなくなります! ここを参照してください： http://jsfiddle.net/Ender/FjgZn/

これら2つの実装方法には間違いなく違いがあるようです。

于 2010-10-15T18:50:54.453 に答える